css二级菜单样式如何设置

css二级菜单样式如何设置

代码粘贴的太复杂；
先给你分析一下原理：二级菜单没有在没有hover属性的情况下是隐藏的所以需要display：none，当鼠标hover的时候二级菜单才会列出来，这是纯css可以实现的；
知道上面的原理之后，下面比较容易实现具体看例子：
HTML代码：

一级菜单
一级菜单

二级菜单


CSS代码：
ul li ul.drop-ul{ display: none;position:relative }
ul li:hover ul.drop-ul li{display: block;} 

ul li:hover ul.drop-ul li{position:absolute;}
此时可能会发现会二级菜单出现有那么一点点的生硬；没关系配合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前面；