這是CODE
<script>
$(function(){
var _this = $('#whmenu');
var _option = $('ul#whmenu li');
var _sub_menu = $('#whmenu li ul');
var _sub_option = $('#whmenu li li');
var _a = $('#whmenu li a');
_this.css({
position:'relative',
display:'block'
});
_option.css({
listStyle:'none',
display:'inline-block',
textAlign:'center',
paddingLeft:'20px',
paddingRight:'20px',
lineHeight:'30px',
backgroundColor:'#00559a'
});
_a.css({
color:'#fff',
fontSize:'14px'
});
_sub_menu.css({
position:'absolute',
zIndex:'10',
boxShadow:'0px 0px 5px #000'
});
_sub_option.css({
listStyle:'none',
display:'block',
textAlign:'center',
paddingLeft:'20px',
paddingRight:'20px',
lineHeight:'30px',
backgroundColor:'#00559a'
});
_sub_menu.hide();
_option.hover(function(){
$(this).animate({
backgroundColor:'#9cc163'
}, 100);
$(this).children().animate({
color:'#fff'
}, 100);
},function(){
$(this).animate({
backgroundColor:'#00559a'
}, 100);
$(this).children().animate({
color:'#fff'
}, 100);
});
_option.hover(function(){
var left = $(this).position().left;
$(this).children('ul').fadeIn(100);
$(this).children('ul').css({
left:left+'px',
top:'30px'
});
},function(){
$(this).children('ul').hide();
});
})
</script>
<ul id="whmenu">
<li>
<a href="#">關於</a>
</li>
<li>
<a href="#">技術支源</a>
</li>
<li>
<a href="#">線上試用</a>
</li>
<li>
<a href="#">個案分析</a>
</li>
<li>
<a href="#">服務據點</a>
<ul>
<li><a href="#">項目1</a></li>
<li><a href="#">項目2</a></li>
</ul>
</li>
<li>
<a href="#">客服中心</a>
<ul>
<li><a href="#">售後服務</a></li>
<li><a href="#">聯絡方式</a></li>
</ul>
</li>
</ul>
不過會出現一個BUG,移動快的話會出現這樣的問題,緩慢還沒問題
麻煩各位大大幫忙解答,感恩~~!