HTML之实现下拉式菜单

最新推荐文章于 2023-06-09 22:36:08 发布

最新推荐文章于 2023-06-09 22:36:08 发布 · 709 阅读

文章标签：

#java

本文介绍了一种使用CSS实现下拉菜单的方法。通过设置子菜单的初始可见性为隐藏，并结合:hover伪类，在鼠标悬停时显示子菜单，从而完成下拉效果。

示例代码：

<!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; }，当有鼠标进入时，将子菜单显示出来。