html li 宽度,含有中文的<li>宽度不能自适应

如图：

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();

}

);

})

• 首页
• HTML
  • XS
• CSS
• JavaScript
  • Jquery
    • 哈哈杂地工中
    • ajax
  • JS高级
• PHP