利用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>
