css实现一级下拉菜单

最新推荐文章于 2024-04-22 15:22:18 发布

穆雄雄

最新推荐文章于 2024-04-22 15:22:18 发布

阅读量952

点赞数 1

分类专栏： # Html+CSS 文章标签： css html 下拉菜单二级菜单

本文链接：https://blog.csdn.net/qq_34137397/article/details/53049182

版权

Html+CSS 专栏收录该内容

32 篇文章 5 订阅

订阅专栏

涉及到的图片请到这里下载

涉及到的图片请到这里下载

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;
}