首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

纯html+css制作三级下拉菜单

所属分类： 网页制作 / CSS 阅读数： 1201
收藏 0 赞 0 分享

直入主题，html+css制作三级下拉菜单实现代码分享给大家，具体内容如下

1.html代码    

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>三级下拉菜单导航栏</title>  
  6.     <link rel="stylesheet" type="text/css" href="style.css">  
  7. </head>  
  8. <body bgcolor="aliceblue">  
  9.     <ul class="nav">  
  10.         <li>  
  11.             <a href="" target="_blank">  
  12.                 手机数码<span class="triangle">▼</span></a>  
  13.             <ul>  
  14.                 <li><a href="#" target="_blank">  
  15.                     手机 <span class="triangle">▶</span>  
  16.                     </a>  
  17.                     <ul>  
  18.                         <li><a href="">小米</a></li>  
  19.                         <li><a href="">华为</a></li>  
  20.                         <li><a href="">魅族</a></li>  
  21.                     </ul>  
  22.                 </li>  
  23.                 <li><a href="">  
  24.                     电脑 <span class="triangle">▶</span>  
  25.                     </a>  
  26.                     <ul>  
  27.                         <li><a href="">平板</a></li>  
  28.                         <li><a href="">笔记本</a></li>  
  29.                         <li><a href="">台式</a></li>  
  30.                     </ul>  
  31.                 </li>  
  32.                 <li><a href="">相机</a></li>  
  33.             </ul>  
  34.         </li>  
  35.         <li><a href="">男装女装<span class="triangle">▼</span></a>  
  36.             <ul>  
  37.                 <li><a href="">  
  38.                     上衣 <span class="triangle">▶</span></a>  
  39.                     <ul>  
  40.                         <li><a href="">衬衫</a></li>  
  41.                         <li><a href="">T恤</a></li>  
  42.                     </ul>  
  43.                 </li>  
  44.                 <li><a href="">  
  45.                     裤子 <span class="triangle">▶</span></a>  
  46.                     <ul>  
  47.                         <li><a href="">牛仔裤</a></li>  
  48.                         <li><a href="">休闲裤</a></li>  
  49.                     </ul>  
  50.                 </li>    
  51.             </ul>  
  52.         </li>  
  53.         <li><a href="">运动户外<span class="triangle">▼</span></a>  
  54.             <ul>  
  55.                 <li><a href="">运动鞋</a></li>  
  56.                 <li><a href="">运动服</a></li>  
  57.                 <li><a href="">运动设备</a></li>       
  58.             </ul>  
  59.         </li>  
  60.         <li>  
  61.             <a href="">时尚百货</a>  
  62.         </li>  
  63.         <li><a href="">生活服务<span class="triangle">▼</span></a>  
  64.             <ul>  
  65.                 <li><a href="">万能缴费</a></li>  
  66.                     <ul>  
  67.                         <li><a href="">水费</a></li>  
  68.                         <li><a href="">电费</a></li>  
  69.                     </ul>  
  70.                 <li><a href="">教育培训</a></li>       
  71.                 <li><a href="">话费充值</a></li>  
  72.             </ul>  
  73.         </li>  
  74.         <li>  
  75.             <a href="">   汇吃美食</a>  
  76.         </li>  
  77.         <li>  
  78.             <a href="">   家居家纺<span class="triangle">▼</span></a>  
  79.             <ul>  
  80.                 <li><a href="">  
  81.                     <span class="triangle">◀</span> 床上用品</a>  
  82.                     <ul class="nav1">  
  83.                         <li><a href="">被子</a></li>  
  84.                         <li><a href="">枕头</a></li>  
  85.                     </ul>  
  86.                 </li>  
  87.                 <li>  
  88.                     <a href=""><span class="triangle">◀</span> 客厅家具</a>  
  89.                     <ul class="nav1">  
  90.                         <li><a href="">茶具</a></li>  
  91.                         <li><a href="">沙发</a></li>  
  92.                         <li><a href="">椅子</a></li>  
  93.                     </ul>  
  94.                 </li>  
  95.             </ul>  
  96.         </li>  
  97.     </ul>  
  98. </body>  
  99. </html>      

2.CSS 代码

CSS Code复制内容到剪贴板
  1. *{   
  2.         padding: 0;   
  3.         margin: 0;         
  4.     }   
  5.     ul{   
  6.         list-style-type:none;   
  7.     }   
  8.     .triangle{   
  9.     
  10.         font-size: 1em;   
  11.         color: white;    
  12.     }   
  13.     a{   
  14.         text-decoration:none;   
  15.         text-align: center;   
  16.         font-weight: bold;   
  17.     
  18.     }   
  19.     /*一级导航*/  
  20.     ul.nav{   
  21.         float: left;   
  22.         border:1px solid gray;   
  23.         margin-left: 10%;   
  24.         margin-top:10px;   
  25.         border-radius: 4px;   
  26.         position: fixed;   
  27.     }   
  28.     ul.nav li{   
  29.         float: left;   
  30.         width: 9em;   
  31.         background-color:yellowgreen;   
  32.     }   
  33.     ul.nav a{   
  34.         display: block;   
  35.         color: white;   
  36.         line-height: 1.5em;   
  37.         border-right: 1px solid white;   
  38.         border-left: 1px solid white;   
  39.         padding: 5px;   
  40.     }   
  41.     
  42.     ul.nav a:hover,   
  43.     ul.nav a:focus{   
  44.         color: black;   
  45.         background-color: #98FB98;   
  46.         opacity: 0.5;   
  47.     }   
  48.     ul.nav li:first-child a{   
  49.         border-left: 0;   
  50.         border-bottom: 0;   
  51.     }   
  52.     ul.nav li:last-child a{   
  53.         border-right: 0;   
  54.         border-bottom: 0;   
  55.     }   
  56.     /*二级导航*/  
  57.     ul.nav li ul{   
  58.         width: 10em;           
  59.         position: absolute;   
  60.         left: -1000em;   
  61.     }   
  62.         
  63.     ul.nav li:hover ul{   
  64.         width: 10em;   
  65.         left:auto;   
  66.     }   
  67.         
  68.     ul.nav li ul a{   
  69.         border-top: 1px solid white;   
  70.         border-bottom: 1px solid white;   
  71.         border-left: 0;   
  72.         border-right: 0;   
  73.             
  74.     }   
  75.     /*三级导航*/  
  76.     ul.nav li:hover ul li ul{   
  77.         width: 10em;   
  78.         position: absolute;   
  79.         left: -1000em;   
  80.     
  81.     }   
  82.         
  83.     ul.nav li:hover ul li:hover ul{   
  84.         left: auto;   
  85.         margin-left: 9.1em;   
  86.         margin-top: -2.1em;   
  87.     }   
  88.     ul.nav li:hover ul li:hover ul.nav1{   
  89.         left: auto;   
  90.         margin-left: -9.1em;   
  91.         margin-top: -2.1em;   
  92.     }   

以上就是本文的全部内容，欢迎大家学习完善。

更多精彩内容其他人还在看

CSS入门教程:计算CSS盒模型宽和高

　出处：当我们布局一个网页的时候，经常会遇到这样的一种情况，那就是最终网页成型的宽度或是高度会超出我们预先的计算，其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;}
收藏 0 赞 0 分享

在IE流览器中正确显示PNG透明图片

　　png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景，如：在有颜色过度背景上插入不规则边框的图片带来极大很便利! 　　但目前IE中对于插入
收藏 0 赞 0 分享

CSS教程:DIV底部放置文字

　　css对文字的布局上没有靠容器底部对齐的参数，目前使用的一个不错的方法也比较好.就是用position属性来解决，看下面的代码，用position的相对和绝对定位功能也轻松的实现了，文字靠近div低部对齐，并且靠近的距离还可以精确到像素，自己可以调节，是不是很不错呢?
收藏 0 赞 0 分享

如何用CSS让文字居于div的底部

　　这个问题是别人提出的，因为css对文字的布局上没有靠容器底部对齐的参数，（或许有但是我没有发现）不过目前我使用的一个不错的方法也比较好．就是用position属性来解决，看下面的代码，我用position的相对和绝对定位功能也轻松的实现了，文字靠近div低部对齐，并且靠近
收藏 0 赞 0 分享

从A页面连接到B页面后并直接把B页面的隐藏层显示

　　这个效果实现的是，在B页面里有两个层，一个显示层，我们暂定名c层，一个是隐藏层，我们暂定名d层，单独进B页面的时候，c层显示，d层隐藏，然而从A页面连接到B页面的时候，则是让d层显示，c层隐藏，我觉得这个效果对网页设计者以后会有很大帮助，现在把代码发出来，
收藏 0 赞 0 分享

CSS样式表定义标签li前面样式

定义LI前面的小点样式 view plaincopy to clipboardprint? 语法： list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
收藏 0 赞 0 分享

符合标准的div css制作的弹出菜单

本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的. NO.1最基本的：二级dropdown弹出菜单 <!DOCTYPE html PUB
收藏 0 赞 0 分享

CSS实现在文章每段后面加入带连接的隐藏文字

代码主要理解３个参数：createElement、createTextNode、appendChild。这３个js参数分别是创建元素、创建字符、追加节点。代码原理：循环页面段落标签<p>，创建连接元素<a>，创建要显示的连接字符，用SetAttribute
收藏 0 赞 0 分享

CSS:浏览器特定选择器介绍

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时，这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child html {} * html {} 只对IE 7 *:first-child html {} 只对IE 7
收藏 0 赞 0 分享

WEB标准学习,认识两种网页声明的含义

即网页标准推出来以后，我们时常会看到两种不同的网页的声明，一个是Dhtml，一个是Xhtml。如下所示： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22