HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下拉菜单</title>
<link rel="stylesheet" href="css/xialacaidan.css">
</head>
<body>
<div class="top">
<ul>
<li>
<div class="a">
<a href="#" class="b">首页</a>
</div>
</li>
<li>
<div class="a">
<a href="#" class="b">学校概况</a>
<ul class="c">
<li><a href="#">现任领导</a></li>
<li><a href="#">学校简介</a></li>
<li><a href="#">办学思想</a></li>
</ul>
</div>
</li>
<li>
<div class="a">
<a href="#" class="b">机构设置</a>
<ul class="c">
<li><a href="#">办事机构</a></li>
<li><a href="#">教学院部</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</div>
</li>
<li>
<div class="a">
<a href="#" class="b">人才培养</a>
<ul class="c">
<li><a href="#">专业设置</a></li>
<li><a href="#">教学管理</a></li>
</ul>
</div>
</li>
<li>
<div class="a">
<a href="#" class="b">科学研究</a>
<ul class="c">
<li><a href="#">学科建设</a></li>
<li><a href="#">学术交流</a></li>
</ul>
</div>
</li>
<li>
<div class="a">
<a href="#" class="b">校园文化</a>
</div>
</li>
</ul>
</div>
</body>
</html>
CSS：
*{
margin:0px;
padding: 0px;
}
.top{
width: 100%;
height: 80px;
}
.top a{
text-decoration: none;
}
.top li{
list-style-type: none;
}
/* ul{
margin: 0;
padding: 0;
} */
li{
float:left;/* 横排 */
}
.a{
width: 100px;
height: 90px;
margin-top: 20px;
display: inline-block;
}
.c{
display: none;/* 下拉菜单隐藏 */
/* position: absolute; */
}
/* .c a{
display: block;
} */
.a:hover .c {
display: block;/* 下拉菜单鼠标悬停显示 */
}
3227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
