小编给大家分享一下HTML+CSS如何制作简单下拉菜单,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
具体代码如下:
HTML部分:
<divid="nav">
<ul>
<li>首页</li>
<li>学习视频
<ul>
<li>java</li>
<li>jQuery</li>
<li>C++</li>
<li>PHP</li>
<li>JavaScript</li>
</ul>
</li>
<li>个人中心</li>
<li>关于我们</li>
</ul>
</div>
CSS部分:
*{margin:0px;padding:0px;}
#nav{width:600px;height:40px;margin:0auto;}
#navul{list-style:none;}
#navulli{width:150px;float:left;line-height:40px;text-align:center;position:relative;}
#navullia{text-decoration:none;color:#000;display:block;text-align:center;}
#navullia:hover{color:#FFF;background:#333}
#navulliul{position:absolute;display:none;}
#navulliulli{float:none;line-height:30px;text-align:left;}
#navulliullia{width:100%;}
#navulliullia:hover{background-color:#06f;}
#navulli:hoverul{display:block}
以上是“HTML+CSS如何制作简单下拉菜单”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!