分享几种CSS制作菜单列表的方法

html-css013

分享几种CSS制作菜单列表的方法,第1张

<!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>Document</title> 6     <style> 7         ul{ 8             list-style: none 9         }10         .nav>li{11             float: left12         }13         ul a{14             display: block15             text-decoration: none16             width: 100px17             height: 50px18             text-align: center19             line-height: 50px20             color: white21             background-color: #2f3e4522         }23         .nav>li:first-child a{24             border-radius: 10px 0 0 10px25         }26         .nav>li:last-child a{27             border-radius: 0 10px 10px 028         }29         .drop-down{30             /*position: relative*/31         }32         .drop-down-content{33             padding: 034             display: none35             /*position: absolute*/36         }37         38         h3{39             font-size: 30px40             clear: both41         }42         .drop-down-content li:hover a{43             background-color:red44         }45         .nav .drop-down:hover .drop-down-content{46             display: block47         }48 </style>49 </head>50 <body>51     <ul class="nav">52         <li><a href="#">下拉菜单</a></li>53         <li class="drop-down"><a href="#">下拉菜单</a>54             <ul class="drop-down-content">55                 <li><a href="#">我是1</a></li>56                 <li><a href="#">我是2</a></li>57                 <li><a href="#">我是3</a></li>58             </ul>59             </li>60         <li><a href="#">下拉菜单</a></li>61         <li><a href="#">下拉菜单</a></li>62         <li><a href="#">下拉菜单</a></li>63     </ul>64     <h3>我是测试文字</h3>65 </body>66 </html>

代码粘贴的太复杂;

先给你分析一下原理:二级菜单没有在没有hover属性的情况下是隐藏的所以需要display:none,当鼠标hover的时候二级菜单才会列出来,这是纯css可以实现的;

知道上面的原理之后,下面比较容易实现具体看例子:

HTML代码:

<ul>

<li><a href="">一级菜单</a></li>

<li><a href="">一级菜单</a>

<ul class="drop-ul">

<li ><a href="">二级菜单</a></li>

</ul>

</li>

</ul>

CSS代码:

ul li ul.drop-ul{ display: noneposition:relative }/*正常情况下隐藏*/

ul li:hover ul.drop-ul li{display: block} /*当鼠标放上去二级菜单li 显示出来*/

/*这个时候你会发现二级菜单显示的位置可能不对可以使用position属性*/

ul li:hover ul.drop-ul li{position:absolute}

/*通过top right left 调整位置,根据实际情况调整背景颜色,字体颜色等,细节东西*/

此时可能会发现会二级菜单出现有那么一点点的生硬;没关系配合jquery实现缓慢展现效果

$(document).ready(function() {

if($(window).width() > 768) {

$('ul li').hover(

function() {

$('ul', this).stop().slideDown(200)

  },

function() {

     $('ul', this).stop().slideUp(200)

   }

)

}

})

注意不知道jquery的新手使用记住先加载Jquery.min.js文件,放在此段js前面;

1.首先找到wordpress菜单中的class类名

2.在wordpress模版目录下一般在wp-content\themes\主题名,找到style.css

3.在style.css中为类名添加样式,如下:

.menu-item:{color:red}

这样就可以设计菜单css样式了