CSS--导航栏案例
利用CSS制作北大官网导航栏
详细代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#menu{
background-color: darkred;
width: 100%;
height: 50px;
}
.item{
/* 浮动属性可以让块标签，处于同一行 */
float:left;
width: 100px;
height: 50px;
line-height: 50px;
/* border: 1px solid red; */
text-align: center;
color:white;
position: relative;
}
.item:hover{
background-color: red;
}
#container{
width:720px;
margin: auto;
}
.down_menu>div{
color:black;
}
.down_menu{
background-color: #cccccc;
position: absolute;
display: none;
}
.item:hover>.down_menu{
display: block;
width:100px;
/* left:100px; */
top: 50px;
}
</style>
</head>
<body>
<div id="menu">
<div id="container">
<div class="item">北大概况
<div class="down_menu">
<div>北大简介</div>
<div>组织机构</div>
<div>现任领导</div>
<div>历任领导</div>
<div>历史名人</div>
<div>信息公开</div>
<div>标识系统</div>
</div>
</div>
<div class="item">招生
<div class="down_menu">
<div>本科生</div>
<div>研究生</div>
<div>留学生</div>
<div>继续教育</div>
<div>学生奖助信息</div>
<div>暑期学校</div>
</div>
</div>
<div class="item">学院与院系
<div class="down_menu">
<div>理学部</div>
<div>信息与工程科学部</div>
<div>人文学部</div>
<div>社会科学学部</div>
<div>经济与管理学部</div>
<div>医学部</div>
<div>跨学科类</div>
<div>深圳研究生院</div>
</div>
</div>
<div class="item">教育教学
<div class="down_menu">
<div>师资队伍</div>
<div>部门管理</div>
<div>课程设置</div>
<div>海外学习</div>
<div>课表查询</div>
<div>华文慕课</div>
<div>教学网</div>
<div>证书验证</div>
<div>燕云直播</div>
</div>
</div>
<div class="item">科学研究
<div class="down_menu">
<div>科研成果</div>
<div>研究机构</div>
<div>学术期刊</div>
<div>游管理部门</div>
</div>
</div>
<div class="item">交流合作
<div class="down_menu">
<div>国际交流</div>
<div>国内合作</div>
<div>教育基金会</div>
<div>港澳台交流</div>
<div>北京论坛</div>
<div>孔子学院</div>
</div>
</div>
<div class="item">校园生活
<div class="down_menu">
<div>菁菁校园</div>
<div>讲座演出</div>
<div>艺术生活</div>
<div>体育健康</div>
<div>社团活动</div>
<div>档案馆藏</div>
<div>管理服务</div>
<div>校历</div>
</div>
</div>
</div>
</body>
</html>