HTML之实现下拉式菜单

最新推荐文章于 2024-08-25 19:34:22 发布

zhang-hui

最新推荐文章于 2024-08-25 19:34:22 发布

阅读量5k

点赞数

分类专栏： HTML设计文章标签： html float css

本文链接：https://blog.csdn.net/zhang_hui_cs/article/details/7815128

版权

HTML设计专栏收录该内容

10 篇文章 0 订阅

订阅专栏

示例代码：

<!DOCTYPE html>
<html>
<head>
<STYLE type=text/css>

body { font-family: arial, ̎ͥ, serif; font-size:12px; padding:10px }
#nav { line-height: 24px; list-style-type: none; background:#666; }
#nav a { display: block; width: 80px; text-align:center; }
#nav a:link { color:#666; text-decoration:none; }
#nav a:visited { color:#666;text-decoration:none; }
#nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; }
#nav li { float: left; width: 80px; background:#CCC; }
#nav li a:hover{ background:#999; }
#nav li ul { line-height: 27px; list-style-type: none;text-align:left; visibility : hidden; width: 180px; position: absolute; padding: 5px}
#nav li ul li{ float: left; width: 180px; background: #F6F6F6; } 
#nav li ul a{ display: block; width: 180px;width: 156px;text-align:left;padding-left:24px; } 
#nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00; } 
#nav li:hover ul { visibility : visible; }

</STYLE> 


</head>

<body>

<UL id=nav> 
<LI><A href="#">menu1</A> 
<UL> 
<LI><A href="#">menu1.1</A></LI> 
<LI><A href="#">menu1.2</A></LI> 
<LI><A href="#">menu1.3</A></LI> 
<LI><A href="#">menu1.4</A></LI></UL></LI> 
<LI><A href="#">menu2</A> 
<UL> 
<LI><A href="#">menu2.1</A></LI> 
<LI><A href="#">menu2.2</A></LI> 
<LI><A href="#">menu2.3</A></LI> 
<LI><A href="#">menu2.4</A></LI></UL></LI> 
<LI><A href="#">menu3</A> 
<UL> 
<LI><A href="#">menu3.1</A></LI> 
<LI><A href="#">menu3.2</A></LI> 
<LI><A href="#">menu3.3</A></LI> 
<LI><A href="#">menu3.4</A></LI></UL></LI> 

</UL>
</body>
</html>

自己简单解析一下:

上面代码中,实现下拉式菜单主要是利用鼠标事件来改变css样式

先利用css中的#nav li ul 将visiblity属性设置为hidden，将子菜单隐藏起来；

再利用#nav li:hover ul { visibility : visible; }，当有鼠标进入时，将子菜单显示出来。