效果如下:
当鼠标位于学院概况/学科建设/教师园地/学生园地中的任意一个时,弹出相应的下拉菜单。
基本思路:
使用列表ul和li实现总体布局,通过li嵌套ul实现下拉菜单。
html代码如下:
<div id="menuList">
<ul>
<li>
<a>学院概况</a>
<ul>
<li>学院简介</li>
<li>专业分类</li>
</ul>
</li>
<li>
<a>学科建设</a>
<ul>
<li>学院简介</li>
<li>专业分类</li>
</ul>
</li>
<li>
<a>教师园地</a>
<ul>
<li>学院简介</li>
<li>专业分类</li>
</ul>
</li>
<li>
<a>学生园地</a>
<ul>
<li>学院简介</li>
<li>专业分类</li>
</ul>
</li>
</ul>
</div>
效果如下:
通过对第一层ul设置float属性,让第一行水平摆放
css代码如下:
body,div,ul,li{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
#menuList{
margin:20px;
}
#menuList>ul{
background-color: gray;
padding-left: 50px;
}
#menuList>ul>li{
float: left;
padding: 5px;
border-left: solid 1px black;
cursor: pointer;
}
效果如下:
第一层ul的背景色似乎没有作用,具体原因查看上一篇“HTML之ul背景色”,在</ul>前面加入一个清除浮动的div,即<div style=”clear: both;”></div>
效果如下:
背景色正常显示,但内层的ul似乎也被背景色包围,但我们需要它不占用上层ul的空间,可以通过设置position属性。
在
#menuList>ul>li中添加
position: relative;属性,同时在
#menuList ul li ul中添加
position: absolute;
background-color: #ccc;
属性,使得第二层ul脱离文档流,不占用第一层的空间。
第二层ul的宽度不够,添加属性,给li同样设置5px的padding。
#menuList ul li ul li{
padding: 5px;
cursor: pointer;
}
效果如下:
第二层ul的左边多了一些空白,且上部突出了一部分,调试发现其是与上层的a标签对齐的。由于其是绝对定位的,设置left属性和top属性使其相对于父标签li定位。
css代码如下:
#menuList ul li ul{
position: absolute;
background-color: #ccc;
left:0;
top: 100%;
}
效果如下:
最后,设置第二层ul的display属性,使其隐藏;同时设置第一层li的hover属性,使得鼠标移动到其上时修改第二层ul的属性
css代码如下:
#menuList>ul>li:hover ul{
display: block;
}
#menuList ul li ul{
position: absolute;
display: none;
background-color: #ccc;
left:0;
top: 100%;
}
**大功告成!**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css">
body,div,ul,li{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
#menuList{
margin:20px;
}
#menuList>ul{
background-color: gray;
padding-left: 50px;
}
#menuList>ul>li{
float: left;
padding: 5px;
border-left: solid 1px black;
position: relative;
cursor: pointer;
}
#menuList>ul>li:hover ul{
display: block;
}
#menuList ul li ul{
position: absolute;
display: none;
background-color: #ccc;
left:0;
top: 100%;
}
#menuList ul li ul li{
padding: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="menuList">
<ul>
<li>
<a>学院概况</a>
<ul>
<li>学院简介</li>
<li>专业分类</li>
</ul>
</li>
<li>
<a>学科建设</a>
<ul>
<li>学院简介</li>
<li>专业分类</li>
</ul>
</li>
<li>
<a>教师园地</a>
<ul>
<li>学院简介</li>
<li>专业分类</li>
</ul>
</li>
<li>
<a>学生园地</a>
<ul>
<li>学院简介</li>
<li>专业分类</li>
</ul>
</li>
<div style="clear: both;"></div>
</ul>
</div>
</body>
</html>