程序员笔记

与人方便,自己方便
当前位置:网站首页 / 工具 / 正文

div+css导航下拉菜单怎么写

2017-02-19 / 工具 / 461 次围观 / 0 次吐槽

用css是可以实现这种效果,不够要改一下HTML框架:

<div class="A">
<div class="B" >
<ul>
<li id='li1'><a href="webpage/about.htm">模块1</a>
<div id="C" class="D">
<a href="webpage/about.htm">模块1.1</a>
<a href="webpage/about.htm">模块1.2</a>
<a href="webpage/about.htm">模块1.3</a>
<a href="webpage/about.htm">模块1.4</a>
</div>
</li>
<li><a href="webpage/about.htm">模块2</a></li>
<li><a href="webpage/about.htm">模块3</a></li>
</ul>
</div>
</div>


CSS样式:


*{padding: 0;margin:0;}
li{width: 100px;height: 30px;background: black;text-align: center;}
a{text-decoration: none;color:#fff;margin-bottom: 10px;}
.B li{float: left;}
#C{clear: both;}
#C a{color: black;padding: 8px;display: none;}
#li1:hover a{display: block;}


推荐您阅读更多有关于“”的文章

本站所有文章如无特别注明均为原创。作者:程序员小邓 ,复制或转载请以超链接形式注明转自 程序员笔记
原文地址《div+css导航下拉菜单怎么写
额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-BlogPHP

Copyright 程序员笔记 Rights Reserved.