请选择 进入手机版 | 继续访问电脑版

叶子网络bbs论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 13339|回复: 0

纯css代码编写导航下拉菜单

[复制链接]

0

主题

4

帖子

10

积分

超级版主

Rank: 8Rank: 8

积分
10
发表于 2015-9-21 22:15:01 | 显示全部楼层 |阅读模式
本帖最后由 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;}
复制代码
回复

使用道具 举报

手机版|Archiver|叶子官网|叶子网络 ( 浙ICP备17027999号-5

GMT+8, 2022-1-25 10:38 , Processed in 0.094167 second(s), 22 queries .

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表