×

CSS下拉导航菜单制作方法

作者:Terry2015.11.05来源:Web前端之家浏览:25028评论:0
关键词:JQuerythis

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

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/CSS%E4%B8%8B%E6%8B%89%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95%E5%88%B6%E4%BD%9C%E6%96%B9%E6%B3%95.html

网友评论文明上网理性发言 已有0人参与

发表评论: