                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /形形色色的下拉菜单

如果有2个下拉菜单，怎么处理呢？代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	*{ padding:0; margin:0; list-style:none;}
	.top_nav{ width:500px; margin:0 auto; padding-top:30px; height:40px;}
	.top_nav li{ width:125px; float:left; background:#666; line-height:40px; text-align:center; position:relative;}
	.top_nav li a{ color:#fff; text-decoration:none; display:block;}
	.top_nav li a:hover{ background:#0FF; color:#666;}
	.top_nav li ul{ width:125px; overflow:hidden; position:absolute; left:0; top:40px; display:none;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(".top_nav").mousemove(function(){
			$(this).find("ul").slideDown("1000");
			})
			$(".top_nav").mouseleave(function(){
			$(this).find("ul").slideUp("1000");
			})
		})
</script>
</head>

<body>
	<ul class="top_nav">
    	<li><a href="#">首页</a></li>
        <li><a href="#">课程大纲</a>
        	<ul>
            	<li><a href="#">前端开发</a></li>
                <li><a href="#">手机开发</a></li>
                <li><a href="#">Java编程</a></li>
            </ul>
        </li>
        <li><a href="#">学习中心</a>
        	<ul>
            	<li><a href="#">前端开发</a></li>
                <li><a href="#">手机开发</a></li>
                <li><a href="#">Java编程</a></li>
            </ul>
        </li>
        <li><a href="#">联系我们</a></li>
    </ul>
</body>
</html>

Carrie_IT

2014-12-17

源自：形形色色的下拉菜单 6-3

关注问题我要回答

1335

操作

收起

4 回答

arlenhui
2015-05-30

因为你css控制是一起的，没有分开来，可以尝试加上class或者id，建议还是用js实现触发事件来做下拉框

0 回复有任何疑惑可以回复我~

收起回答

Carrie_IT 提问者

非常感谢！

2015-08-10 回复有任何疑惑可以回复我~

慕仙5196886
2015-12-09

代码错误！！！你找到的是ul实行鼠标滑动事件。正确的是 li 实行滑动事件。

0 回复有任何疑惑可以回复我~

收起回答

别担心_有我陪着你
2015-08-18

源代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>动画菜单jQuery</title>
<style type="text/css">
.top-nav{
font-size: 14px;
font-weight: bold;
list-style: none;

}
.top-nav li{
float: left;
margin-right: 1px;
}
.top-nav li a{
line-height: 34px;
text-decoration: none;
background-color: orange;
color: #fff;
display: block;
width: 80px;
text-align: center;
}
.top-nav li ul{
display: none;
list-style: none;
padding: 0;
position: absolute;
}
.top-nav li a:hover{
background-image: url("images/slide-pannel_14.png");
background-position: 0 0;
background-repeat: repeat-x;
}
.note {
color: pink;
display: block;
background-image: url("images/slide-pannel_14.png");
}
.corner{
display: block;
height: 11px;
background-image: url(images/bird.png);
background-position: 31px 0;
background-repeat:no-repeat;
}
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
/*下滑*/
$(".top-nav li").mouseover(function(){
$(this).find("ul").slideDown("1000");
});
$(".top-nav li").mouseleave(function(){
$(this).find("ul").slideUp("slow");
});
})
</script>
</head>
<body>
<ul class="top-nav">
<li><a href="#"><span class="note">首页</span></a></li>
<li><a href="#">课程大厅</a>
<ul>
<span class="corner"></span>
<li><a href="#">JavaScript</a></li>
<li><a href="#">css</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">学习中心+</a>
<ul>
<span class="corner"></span>
<li><a href="#">前端课程 +</a>
</li>
<li><a href="#">手机开发+</a>
</li>
<li><a href="#">后台编程</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</body>
</html>