                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /形形色色的下拉菜單

2級菜單和3級菜單下多出一條東西

跟著教程做的，2級菜單和3級菜單都會出現(xiàn)這個問題，視頻里面的也是，如何解決？

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Document</title>
<style?type="text/css">
.top-nav{
width:?960px;
margin:?60px?auto;
border:?1px?solid?#222;
background-color:?#111;
background-image:?linear-gradient(#444,#111);
border-radius:?6px;
box-shadow:?0?1px?1px?#777;
padding:?0;
list-style:?none;
}
.top-nav:before,.top-nav:after{
content:?"?";
display:?table;
}
.top-nav:after{
clear:?both;
}
.top-nav{
zoom:1;
}
.top-nav?li{
float:?left;
border-right:?1px?solid?#222;
box-shadow:?1px?0?0?#444;
position:?relative;
}
.top-nav?li?a?{
float:?left;
padding:?12px?30px;
color:?#999;
font:?bold?12px;?
text-decoration:?none;
text-shadow:0?1px?0?#000;
}
.top-nav?li?a:hover{
color:?#fafafa;
}
.top-nav?li?ul{
visibility:?hidden;
position:?absolute;
list-style:?none;
top:?38px;
left:?0;
z-index:?1;
padding:?0;
background-color:?#444;
background-image:?linear-gradient(#444,#111);
box-shadow:?0?-1?0?rgba(255,255,255,.3);
border-radius:?3px;
opacity:?0;
margin:?20px?0?0?0;
_margin:0;
transition:all?.2s?ease-in-out;
}
.top-nav?li:hover?>?ul{
opacity:?1;
visibility:?visible;
margin:?0;
}?
.top-nav?ul?li{
float:?none;
display:?block;
border:?0;
box-shadow:?0?1px?0?#111,0?2px?0?#666;
}
.top-nav?ul?li:after{
box-shadow:?none;
}
.top-nav?ul?a{
padding:?10px;
width:?130px;
display:?block;
float:?none;
_height:10px;
}
.top-nav?ul?a:hover{
background-color:?#0186ba;
background-image:?linear-gradient(#04acec,#0186ba);
}
.top-nav?ul?li:first-child?>?a{
border-radius:?3px?3px?0?0;
}
.top-nav?ul?li:last-child?>?a{
border-radius:?0?0?3px?3px;
}

.top-nav?ul?li:first-child?>?a:before{
content:?"?";
position:?absolute;
left:?40px;
top:?-6px;
border-left:?6px?solid?transparent;
border-right:?6px?solid?transparent;
border-bottom:?6px?solid?#444;
}
.top-nav?ul?li:first-child?>?a:hover:before{
border-bottom-color:?#04acec;
}

.top-nav?ul?ul{
top:?0;
left:?150px;
margin:?0?0?0?20px;
_margin:0;
box-shadow:?-1px?0?0?rgba(255,255,255,.3);
}

.top-nav?ul?ul?li:first-child>a:before{
left:?-6px;
top:?50%;
margin-top:?-6px;
border-left:?0;
border-bottom:?6px?solid?transparent;
border-top:?6px?solid?transparent;
border-right:?6px?solid?#3b3b3b;
}
.top-nav?ul?ul?li:first-child>a:hover:before{
border-right-color:?#0299d3;
border-bottom-color:?transparent;
}
</style>
</head>
<script?type="text/javascript"?src="jQuery/jquery-1.7.1.min.js"></script>
<script?type="text/javascript">
$(function(){
if($.browser.msie?&&?$.browser.version.substr(0,1)<7){
$("li").has("ul").mouseover(function()?{
$(this).children('ul').css('visibility','visible');
}).mouseout(function()?{
$(this).children('ul').css('visibility','hidden');
});
}
});
</script>
<body>
<ul>
<li><a?href="#"><span>首頁</span></a></li>
<li><a?href="#">課程大廳</a></li>
<li><a?href="#">學習中心</a>
<ul?id="mnuUL">
<li><a?href="#">前端課程</a>
<ul>
<li><a?href="#">javascript</a></li>
<li><a?href="#">html</a></li>
<li><a?href="#">css</a></li>
</ul>
</li>
<li><a?href="#">手機開發(fā)</a>
<ul>
<li><a?href="#">ios開發(fā)</a></li>
<li><a?href="#">Android開發(fā)</a></li>
<li><a?href="#">WP開發(fā)</a></li>
</ul>
</li>
<li><a?href="#">后臺編程</a></li>
</ul>
</li>
<li><a?href="#">關于我們</a></li>
</ul>
</body>
</html>