叶子网络bbs论坛

标题: 纯css代码编写导航下拉菜单 [打印本页]
作者: rain    时间: 2015-9-21 22:15
标题: 纯css代码编写导航下拉菜单
本帖最后由 rain 于 2015-9-21 22:16 编辑

1、使用绝对定位，写好下拉菜单的颜色、宽度，最后定义为不显示。（display:none;）
2、一级悬停的时候，再定义为显示。（display:block;）

范例：
div框架部分：
  1. <div class="nav">
  2.           <ul>
  3.               <li  ><a href="#">Home</a>
  4.                   <ul >
  5.         <li > <a href="http://www.lanrentuku.com/" target="_blank">Web Design</a></li>
  6.         <li > <a href="http://www.lanrentuku.com/" target="_blank">Web Development</a></li>
  7.         <li > <a href="http://www.lanrentuku.com/" target="_blank">Web Hosting</a></li>
  8.       </ul></li>
  9.                   <li  ><a href="#">About us</a>
  10.                   <ul >
  11.         <li > <a href="http://www.lanrentuku.com/" target="_blank">Web Design</a></li>
  12.         <li > <a href="http://www.lanrentuku.com/" target="_blank">Web Development</a></li>
  13.         <li > <a href="http://www.lanrentuku.com/" target="_blank">Web Hosting</a></li>
  14.       </ul></li>
  15.                   <li  ><a href="#">Products</a>
  16.                   <ul >
  17.         <li > <a href="http://www.lanrentuku.com/" target="_blank">Web Design</a></li>
  18.         <li > <a href="http://www.lanrentuku.com/" target="_blank">Web Development</a></li>
  19.         <li > <a href="http://www.lanrentuku.com/" target="_blank">Web Hosting</a></li>
  20.       </ul></li>
  21.                   <li  ><a href="#">News</a></li>
  22.                   <li  ><a href="#">Feedback</a></li>
  23.                   <li  ><a href="#">Contact us</a></li>
  24.            </ul>
  25.            <div class="cla"></div>
  26.         </div>
复制代码
css部分：
  1. .nav{ font-size:16px; padding-left:30px;}
  2. .nav ul li{ float:left; background:url(../img/nav.png) no-repeat;}
  3. .nav li:first-child{ background:none;}
  4. .nav li a{ width:110px; text-align:center; padding:14px 0; display:block; color:#333333;}
  5. .nav li a:hover{ color:#6699FF; background:url(../img/navhover.png);}
  6. .nav li:first-child a:hover{ background:url(../img/navhover.png) -2px; color:#FFCC33;}
  7. .nav li:first-child ul li a:hover{ background:none; background-color:rgba(0, 0, 0, 0.1); color:#3399CC;}
  8. .nav ul li ul { display:none;position: absolute;width: 220px;z-index:1000;background-color: #9b59b6;}
  9. .nav ul li:hover ul {display: block;}
  10. .nav ul li ul li {background:none; }
  11. .nav ul li ul li a{ color:#FFFFFF; display: block; text-align:left;padding: 8px 0 8px 15px; width:205px;    }
  12. .nav ul li ul li a:hover { background: rgba(0, 0, 0, 0.1);}
  13. .nav ul li ul li:first-child a:hover{ background: rgba(0, 0, 0, 0.1); color:#3399CC;}
复制代码




欢迎光临 叶子网络bbs论坛 (https://fob0.com/) Powered by Discuz! X3.3