html制作导航条下拉面板,CSS下拉导航菜单制作方法

下拉菜单除了用JS做，也可以用CSS直接弄，本文呢就简单的讲下如何实现下拉导航菜单的。

首先上代码，css部分是这样的：#navul li{float:left;height:46px;position:relative;line-height:46px; font-size:16px; text-align:center;border-left:1px solid #656162;border-right:1px solid #333333}

#navul li.navhome{text-align:center;padding:0 10px;width:50px; background:#00AA98; color:#fff;}

#navul li a:link, #navul li a:visited{display:block;padding:0 20px;color:#FFFFFF;}

#navul li a:hover{color:#eee;text-decoration:none;background:#111}

#navul li ul{visibility:hidden;position:absolute;z-index:10000;top:45px;left:-1px;background:#00AA98;border:#00AA98 1px solid; border-top:none; z-index:999989;}

#navul li ul li{display:block;float:none;margin-right:0px;height:30px;position:relative;line-height:30px;font-size:14px; overflow:hidden; border-bottom:1px solid #049888; border-top:1px solid #13beac;text-align:center;z-index:999999;}

#navul li.navmoon{height:46px;line-height:46px}

#navul li.navmoon a{color:#FFFFFF;}

#navul li.navhome a:hover{color:#FCFF00;}

#navul li.navmoon:hover ul{visibility:visible}

#navul li.navmoon ul a{display:block;width:88px;height:30px;line-height:30px;}

#navul li.navmoon ul a:hover{background:#333;}

HTML代码

• 首页
• JavaScript

• HTML

  • HTML4+CSS2
  • HTML5+CSS3
• 开发工具
• 性能优化
• 移动开发
• 前端教程

其实他的核心就是下拉菜单的属性设置visibility:hidden和visibility:visible