HTML实例之下拉菜单

来源:转载

效果如下:

当鼠标位于学院概况/学科建设/教师园地/学生园地中的任意一个时,弹出相应的下拉菜单。
  基本思路:总体思路使用列表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代码如下:
  1. body,div,ul,li{
  2. margin: 0;
  3. padding: 0;
  4. }
  5. ul{
  6. list-style: none;
  7. }
  8. #menuList{
  9. margin:20px;
  10. }
  11. #menuList>ul{
  12. background-color: gray;
  13. padding-left: 50px;
  14. }
  15. #menuList>ul>li{
  16. float: left;
  17. padding: 5px;
  18. border-left: solid 1px black;
  19. cursor: pointer;
  20. }
效果如下:
  第一层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的内边距
  1. #menuList ul li ul li{
  2. padding: 5px;
  3. cursor: pointer;
  4. }
效果如下:

 第二层ul的左边多了一些空白,且上部突出了一部分,调试发现其是与a标签平齐的。由于其是绝对定位的,设置left属性和top属性使其相对于父标签li定位。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的display属性,使其隐藏;同时设置第一层li的hover属性,使得鼠标移动到其上时修改第二层ul的属性css代码如下:
  1. #menuList>ul>li:hover ul{
  2. display: block;
  3. }
  4. #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>

分享给朋友:
您可能感兴趣的文章:
随机阅读: