怎样使用CSS+Javascript实现弹出列表

html-css025

怎样使用CSS+Javascript实现弹出列表,第1张

用JQuery做弹出二级菜单实在是太容易了。根本不需要其它什么插件，只要几行代码就行！如下：

<html><head>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

</head>

<style>

*{margin:0padding:0}

ul{list-style:none}

#nav{margin:0 autowidth:800pxheight:25pxbackground-color:#333}

#nav li{float:leftposition:relativeborder-right:1px solid #666}

#nav li span{display:inline-blockpadding-left:4pxcolor:#fff}

#nav li a{display:inline-blockpadding:0 15pxfont:12px/25px '宋体'color:#ffftext-decoration:none}

#nav li a:hover{background-color:#000}

#nav li ul{display:noneposition:absoluteleft:0top:25pxwidth:150pxbackground-color:#333}

#nav li ul li{float:noneborder-bottom:1px solid #666}

#nav li ul li a{display:block}

</style>

<script type="text/javascript">

$(function(){

$('#nav li').has('ul').find('a:first').append('<span>>></span>')

$('#nav li').hover(

function(){$(this).find('ul').stop(true,true).slideDown(300)},

function(){$(this).find('ul').stop(true,true).slideUp(300)})

})

</script>

</head>

<body>

<div id="nav">

<ul>

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

<ul>

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

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

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

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

</ul>

</li>

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

<ul>

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

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

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

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

</ul>

</li>

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

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

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

<ul>

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

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

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

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

</ul>

</li>

</ul>

</div>

</body></html>

如果只是做鼠标经过弹出效果，鼠标离开就隐藏，可用:hover实现，给要弹出的部分加相对定位position:absolute给父级元素加position:relative

如果想实现弹出鼠标离开不关闭可以用javascript或jquery来实现；

原理一样，都是要通过css来实现弹出后的定位，可以多看一下“position”属性

使用hover这个属性，hover就是鼠标经过，先给需要出现的下拉表给个display：none，这样下拉表就看不见了，用上hover以后再在里面给display：block；他就出现了。