纯css代码编写导航下拉菜单
本帖最后由 rain 于 2015-9-21 22:16 编辑1、使用绝对定位，写好下拉菜单的颜色、宽度，最后定义为不显示。（display:none;）
2、一级悬停的时候，再定义为显示。（display:block;）
范例：
div框架部分：<div class="nav">
<ul>
<li><a href="#">Home</a>
<ul >
<li > <a href="http://www.lanrentuku.com/" target="_blank">Web Design</a></li>
<li > <a href="http://www.lanrentuku.com/" target="_blank">Web Development</a></li>
<li > <a href="http://www.lanrentuku.com/" target="_blank">Web Hosting</a></li>
</ul></li>
<li><a href="#">About us</a>
<ul >
<li > <a href="http://www.lanrentuku.com/" target="_blank">Web Design</a></li>
<li > <a href="http://www.lanrentuku.com/" target="_blank">Web Development</a></li>
<li > <a href="http://www.lanrentuku.com/" target="_blank">Web Hosting</a></li>
</ul></li>
<li><a href="#">Products</a>
<ul >
<li > <a href="http://www.lanrentuku.com/" target="_blank">Web Design</a></li>
<li > <a href="http://www.lanrentuku.com/" target="_blank">Web Development</a></li>
<li > <a href="http://www.lanrentuku.com/" target="_blank">Web Hosting</a></li>
</ul></li>
<li><a href="#">News</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Contact us</a></li>
</ul>
<div class="cla"></div>
</div>css部分：.nav{ font-size:16px; padding-left:30px;}
.nav ul li{ float:left; background:url(../img/nav.png) no-repeat;}
.nav li:first-child{ background:none;}
.nav li a{ width:110px; text-align:center; padding:14px 0; display:block; color:#333333;}
.nav li a:hover{ color:#6699FF; background:url(../img/navhover.png);}
.nav li:first-child a:hover{ background:url(../img/navhover.png) -2px; color:#FFCC33;}
.nav li:first-child ul li a:hover{ background:none; background-color:rgba(0, 0, 0, 0.1); color:#3399CC;}
.nav ul li ul { display:none;position: absolute;width: 220px;z-index:1000;background-color: #9b59b6;}
.nav ul li:hover ul {display: block;}
.nav ul li ul li {background:none; }
.nav ul li ul li a{ color:#FFFFFF; display: block; text-align:left;padding: 8px 0 8px 15px; width:205px; }
.nav ul li ul li a:hover { background: rgba(0, 0, 0, 0.1);}
.nav ul li ul li:first-child a:hover{ background: rgba(0, 0, 0, 0.1); color:#3399CC;}
页:
[1]