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

三级怎么做用jquery

三级菜单怎么用jquery来做我一做好像有问题！

谨慎

2015-11-11

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

关注问题我要回答

873

操作

收起

2 回答

戴眼镜的粉红兔子
2016-02-18

<!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/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
        *{ margin:0px; padding:0px;}
        body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;}
        #nav{ width:600px; height:40px; background-color:#eee; margin:0 auto;}
        ul{ list-style:none;}
        ul li{ float:left; line-height:40px; text-align:center; width:100px;position: relative;}
        a{ text-decoration:none; color:#000; display:block;}
        a:hover{ color:#F00; background-color:#666;}
        ul li ul li{ float:none;background-color:#eee; margin:2px 0px;}
        ul li ul{display:none;}
        .navmenu ul li ul{position: absolute;left:105px;top:0px;}
        .navmenu ul li ul li{width: 120px;}
    </style>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script type="text/javascript">
	    $(function(){
	    	$(".navmenu").mouseover(function(){
	    		$(this).children("ul").show();
	    	})
	    	$(".navmenu").mouseout(function(){			
	    		$(this).children("ul").hide();	    			    		
	    	})
	    	$(".navmenu").find("li").mouseover(function(){
	    		$(this).children("ul").show();
	    	})
	    	$(".navmenu").find("li").mouseout(function(){
	    		$(this).children("ul").hide();
	    	})
	    }) 
    </script>
</head>
 
<body>
<div id="nav">
    <ul>
        <li><a href="#">首页</a></li>
        <li class="navmenu"><a href="#">课程大厅</a>
            <ul>
                <li><a href="#">JavaScript</a>
                	<ul>
                		<li>
                			<a href="#">javascript入门</a>
                		</li>
                		<li>
                			<a href="#">javascript进阶</a>
                		</li>
                	</ul>
                </li>
                <li><a href="#">Html/CSS</a>
                	<ul>
                		<li>
                			<a href="#">Html/CSS入门</a>
                		</li>
                		<li>
                			<a href="#">Html/CSS进阶</a>
                		</li>
                	</ul>
                </li>
            </ul>
        </li>
        <li class="navmenu"><a href="#">学习中心</a>
            <ul>
                <li><a href="#">视频学习</a></li>
                <li><a href="#">实例练习</a></li>
                <li><a href="#">问与答</a></li>
            </ul>
 
        </li>
        <li><a href="#">经典案例</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</div>
</body>
</html>

这我写的一个，出现了三级菜单，但是因为它的上一级ul设置了鼠标离开时隐藏，结果只能看不能点，写在这里也希望哪位大神看到并有思路的话，前来搭救。3q吉拉