如图:
css用了postion: absolute就有这个问题。
html代码
Test* {margin: 0; padding: 0; list-style: none; text-decoration: none;}
#header {background: #fff; width: 100%; height: 79px; border-bottom: 1px inset #E1E1E1; position: fixed; top: 0; left: 0; z-index: 99;}
#menu {width: 90%; height: 79px; margin: 0 auto;}
#menu-li {float: left;}
.nav {height: 79px;}
.nav li {margin-right: 5px; height: 78px; float: left;}
.nav li a {padding: 0 20px; height: 78px; color: #888888; font: normal 300 16px/78px Arial,sans-serif; display: block; text-align: center;}
.nav li a:hover {color: #fff; background: #FF9900; cursor: pointer;}
.submenu {border-top: 1px solid #E1E1E1;}
.submenu li {height: 48px; float: none; border-left: 1px solid #E1E1E1; border-right: 1px solid #E1E1E1; border-bottom: 1px solid #E1E1E1;}
.submenu li a {height: 48px; font: normal 300 16px/48px Arial,sans-serif; display: block; padding: 0 20px; color: #888888; background: #fff;}
.submenu li a:hover {color: #fff; background: #FF9900; cursor: pointer;}
.hide {display: none;}
$(function() {
var navLi = $('.navLi');
navLi.hover(
function() {
var position = $(this).position();
var liWidth = $(this).width();
var liHeight = $(this).height();
$(this).children('ul').css({
/*'position': 'relative',
'left': liWidth,
'top': -liHeight + 10*/
// 使用absolute会导致中文宽度不能自适应
'position': 'absolute',
'left': position.left + liWidth,
'top': position.top + 10
});
$(this).children('ul').show();
},function() {
$(this).children('ul').hide();
}
);
})