css实现一级下拉菜单
涉及到的图片请到这里下载
涉及到的图片请到这里下载
涉及到的图片请到这里下载
html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>北大青鸟——下拉列表菜单页面</title>
<link href="css/menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container" class="bodyBg">
<!--导航开始-->
<div id="top">
<div class="logo"><img src="image/logo.png" alt="logo" /></div>
<div class="topAdver1">北大青鸟授权培训中心</div>
<div class="topAdverText"><a href="#">青鸟官网</a> | <a href="#">中心首页</a></div>
<div class="topAdver2"><img src="image/TopAdver.png" alt="adver" /></div>
<div class="clear"></div>
<!--页面栏目开始-->
<div class="menu">
<dl>
<dt><a href="#">中心信息</a></dt>
<dd><a href="#">中心介绍</a>
<a href="#" >荣誉奖项</a>
<a href="#" >中心环境</a>
<a href="#" >中心地址</a>
<a href="#" >联系我们</a> </dd>
</dl>
<dl>
<dt><a href="#">新闻动态</a></dt>
<dd><a href="#">行业新闻</a>
<a href="#" >中心新闻</a> </dd>
</dl>
<dl>
<dt><a href="#">课程介绍</a></dt>
</dl>
<dl>
<dt><a href="#">师资力量</a></dt>
<dd><a href="#">招生办公室</a>
<a href="#" >教质部</a>
<a href="#" >学术部</a>
<a href="#" >就业部</a> </dd>
</dl>
<dl>
<dt><a href="#">就业展示</a></dt>
<dd><a href="#">就业学员</a>
<a href="#" >签约名企</a>
<a href="#" >就业感言</a>
<a href="#" >就业活动</a>
<a href="#" >就业部工作</a> </dd>
</dl>
<dl>
<dt><a href="#">学术教学</a></dt>
<dd><a href="#">教学教法</a>
<a href="#" >学习心得</a>
<a href="#" >视频分享</a>
<a href="#" >技术文档</a> </dd>
</dl>
<dl>
<dt><a href="#">学员天地</a></dt>
<dd><a href="#">学员活动</a>
<a href="#" >学社工作</a>
<a href="#" >项目展示</a> </dd>
</dl>
<dl>
<dt><a href="#">招生信息</a></dt>
<dd><a href="#">开班信息</a>
<a href="#" >体验课信息</a>
<a href="#" >讲座信息</a>
<a href="#" >招生问答</a> </dd>
</dl>
<dl>
<dt><a href="#">咨询报名</a></dt>
</dl>
</div>
<!--页面栏目结束-->
</div>
<!--导航结束-->
<!--主体内容开始-->
<div id="content">
<!--公告-->
<div class="topAdver"><span class="bold">公司公告栏：</span><a href="#">北大青鸟APTECH ACCP7.0新闻发布会将于10月18日下午在二楼会议厅召开！</a></div>
<div class="h10"></div>
<!--图片广告-->
<div class="left w770"><img src="image/centerAdver05.png" alt="adver"/></div>
<div class="right w200">
<div><a href="#"><img src="image/centerAdver01.png" alt="adver"/></a></div>
<div class="adverImg1"><a href="#"><img src="image/centerAdver02.png" alt="adver"/></a></div>
<div class="adverImg1"><a href="#"><img src="image/centerAdver03.png" alt="adver"/></a></div>
<div class="adverImg1"><a href="#"><img src="image/centerAdver04.png" alt="adver"/></a> </div>
</div>
<div class="h10"></div>
<div class="borderBlue">
<div class="borderBlueB">
<div class="cooperateTitle"></div>
<div class="cooperateText">合作企业</div>
</div>
<div class="h10"></div>
<ul class="cooperate">
<li><a href="#">北京北大青鸟</a></li>
<li><a href="#">西安北大青鸟</a></li>
<li><a href="#">武汉北大青鸟</a></li>
<li><a href="#">长春北大青鸟</a></li>
<li><a href="#">北京北大青鸟</a></li>
<li><a href="#">西安北大青鸟</a></li>
<li><a href="#">武汉北大青鸟</a></li>
<li><a href="#">长春北大青鸟</a></li>
<li><a href="#">北京北大青鸟</a></li>
<li><a href="#">西安北大青鸟</a></li>
<li><a href="#">武汉北大青鸟</a></li>
<li><a href="#">长春北大青鸟</a></li>
<li><a href="#">北京北大青鸟</a></li>
<li><a href="#">西安北大青鸟</a></li>
<li><a href="#">武汉北大青鸟</a></li>
<li><a href="#">长春北大青鸟</a></li>
</ul>
<div class="h10"></div>
<div class="clear"></div>
</div>
</div>
<!--主体内容结束-->
<!--版权内容开始-->
<div class="h10"></div>
<div id="bottom"> 北京APTECH北大青鸟信息技术有限公司版权所有<br />
地址：北京市城府号207号北大青鸟楼<br />
电话：010-62768866<br />
传真：010-82667065</div>
</div>
<!--版权内容结束-->
</div>
</body>
</html>
css代码
@charset "utf-8";
/* CSS Document */
/*通用部分*/
body, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li {
margin:0;
padding:0;
}
body {
font:12px/1.5 "宋体";
color:#000;
}
img {
border:0;
}
ul, li {
list-style:none;
}
a {
color:#626262;
text-decoration:none;
}
a:hover {
color:#626262;
text-decoration:underline;
}
#container {
margin:0 auto;
width:1004px;
}
.bodyBg {
background-image:url(../image/bodyBg.jpg);
background-repeat:no-repeat;
width:1004px;
}
#top, #content, #bottom {
width:980px;
margin:0px auto;
clear:both;
}
/*保证使用float时背景正常显示*/
.clear {
clear:both;
height:0px;
overflow:hidden;
}
.h10 {
height:10px;
clear:both;
overflow:hidden;
}
.left {
float:left;
}
.right {
float:right;
}
.logo {
float:left;
padding-left:5px;
padding-top:15px;
}
.topAdver1 {
float:left;
padding-top:50px;
padding-left:0px;
color:#FFF;
font-size:18px;
font-weight:bolder;
}
.topAdverText {
float:right;
color:#6cddfd;
width:300px;
text-align:right;
padding-top:5px;
}
.topAdverText a, .topAdverText a:hover {
color:#6cddfd;
text-decoration:none;
}
.topAdver2 {
float:right;
}
.topAdver3 {
float:right;
padding-top:40px;
width:165px;
text-align:right;
}
/*下拉列表菜单*/
.menu dl {
float:left;
width:108px;
position:relative; /*下拉效果*/
}
.menu dt {
background-image:url(../image/centerMenuBg.png);
background-repeat:no-repeat;
height:36px;
padding-top:13px;
text-align:center;
color:#ffffff;
font-size:14px;
font-weight:bold;
}
.menu dt a, .menu dt a:hover {
text-decoration:none;
color:#ffffff;
font-size:14px;
font-weight:900;
}
.menu dd {
background:url(../image/secondBgj.gif) repeat-y;
width:80px;
padding-left:10px;
/*下拉菜单效果*/
display:none;
position:absolute;
z-index:1;
left:10px;
top:36px;
}
.menu dd a {
font-size:12px;
line-height:25px;
display:block;
}
.menu dl:hover dd {
display:block; /*下拉菜单效果*/
}
.bold {
font-weight:bold;
}
.topAdver {
background-image: url(../image/adverBg.png);
background-repeat:no-repeat;
width:975px;
height:20px;
padding-left:5px;
padding-top:5px;
color:#626262;
}
.borderBlue {
border:1px #0273c3 solid;
}
.borderBlueB {
border-bottom:1px #0273c3 solid;
height:33px;
background-color:#1b93e9;
}
.cooperateTitle {
background:url(../image/iconBg.gif) 2px 1px no-repeat;
width:35px;
height:30px;
float:left;
}
.cooperateText {
color:#FFF;
font-size:14px;
font-weight:bold;
padding-top:5px;
}
.cooperate li {
float:left;
padding-left:10px;
padding-top:5px;
width:110px;
}
.centerTopAdver {
background-image:url(../image/centerTopAdver.png);
background-repeat:no-repeat;
width:535px;
height:21px;
float:left;
padding-top:4px;
padding-left:5px;
color:#626262;
}
#bottom {
color:#626262;
text-align:center;
line-height:25px;
}
