jq三级导航菜单可修改为二级、四级等导航菜单

此导航菜单为三级导航菜单，可以通过简单的修改变换成二级或四级导航菜单使用。虽然没有无限级导航那么智能，3级导航已经够用，导航太深的话，对用户体验不好。

此代码参考自《JQ攻略》，原书代码的样式虽略有问题（这里已修改），但代码相当简洁清晰，值得借鉴。

body,ul,li{ margin:0; padding:0;}
a{ text-decoration:none; color:#000;}
ul{ list-style:none;}
.nav_ul{ height:30px; margin:50px 0 0 50px;}
.nav_ul li{ float:left; background-color:#6FF;}
.nav_ul li a{ display:block; padding:4px 10px; border-right:1px solid #000;}
.nav_ul li a:hover{ background-color:#030; color:#fff;}
.nav_ul li ul{ position:absolute; visibility:hidden; 150px;}
.nav_ul li ul li{ clear:both; background-color:#9C0;border-bottom:1px solid #000;}
.nav_ul li ul li a{ border-right:0; 130px;}
.nav_ul li ul ul{ left:100%; top:0;}
.nav_ul li ul ul li{ background-color:#069;}
.hover{ position:relative;}
.clear{ clear:both;}
</style>
<ul class="nav_ul">
    <li><a href="#">一级导航1</a>
        <ul>
            <li><a href="#">二级导航1-1</a></li>
            <li><a href="#">二级导航1-2</a>
                <ul>
                    <li><a href="#">三级导航1-2-1</a></li>
                    <li><a href="#">三级导航1-2-2</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">一级导航2</a>
        <ul>
            <li><a href="#">二级导航2-1</a>
                <ul>
                    <li><a href="#">三级导航2-1-1</a></li>

                    <li><a href="#">三级导航2-1-2</a></li>
                </ul>
            </li>
            <li><a href="#">二级导航2-2</a></li>
        </ul>
    </li>
</ul>
</pre>
<strong>js代码：</strong>
<pre lang="javascript">
$(document).ready(function(){
    $("ul.nav_ul li").hover(
    function(){
        $(this).addClass("hover");
        $("ul:first", this).css("visibility","visible");
    },
    function(event){
        $(this).removeClass("hover");
        $("ul:first", this).css("visibility","hidden");
    })
    $(".nav_ul li ul li:has(ul)").find("a:first").append(" >")
})