CSS下拉导航菜单制作方法 - Web前端

下拉菜单除了用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代码

<ul id="navul" class="cl">
        <li id="nvabar-item-index"><a href="https://www.jiangweishan.com/">首页</a></li>
        <li id="navbar-category-1"><a href="https://www.jiangweishan.com/">javascript</a></li>
        <li id="navbar-category-16">
            <a href="HTTPS://www.jiangweishan.com/">HTML</a>
            <ul>
                <li><a href="https://www.jiangweishan.com/">html4+CSS2</a></li>
                <li><a href="HTTPs://www.jiangweishan.com/">html5+css3</a></li>
            </ul>
        </li>
        <li id="navbar-category-11"><a href="https://www.jiangweishan.com/">开发工具</a></li>
        <li id="navbar-category-5"><a href="https://www.jiangweishan.com/">性能优化</a></li>
        <li id="navbar-category-7"><a href="https://www.jiangweishan.com/">移动开发</a></li>
        <li id="navbar-category-13"><a href="https://www.jiangweishan.com/">前端教程</a></li>
</ul>

其实他的核心就是下拉菜单的属性设置

visibility:hidden和visibility:visible