css实现一级下拉菜单-阿里云开发者社区

css实现一级下拉菜单

2023-05-16 75

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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;
}

css实现一级下拉菜单

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

css实现一级下拉菜单

热门文章

最新文章

相关课程

相关电子书

相关实验场景