css二级菜单样式如何设置

html-css022

css二级菜单样式如何设置,第1张

代码粘贴的太复杂；

先给你分析一下原理：二级菜单没有在没有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前面；

一种超级简单的二级下拉菜单制作方法，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>简单的二级下拉菜单</title>

<style type="text/css">

#FM >li >ul.fm{ display:none}

#FM >li:hover >ul.fm{ display:block}

</style>

</head>

<body>

</body>

</html>

<body>

<ul id="FM">

<li><a href="#">首页</a>

<ul class="fm">

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

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

</ul>

</li>

<li><a href="#">关于我们</a>

<ul class="fm">

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

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

</ul>

</li>

</li>

</ul>

</body>

</html>

所作出来的效果为：

这样子就很快的用css实现简单的二级下拉菜单啦！