极客观点
项目管理
HarmonyOS
如图：
css用了postion: absolute就有这个问题。
html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
* {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;}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(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();
}
);
})
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="menu">
<div id="menu-li">
<!-- 导航部分 -->
<ul class="nav">
<li><a href="./">首页</a></li>
<li class="navLi"><a href="category.php?cid=1">HTML</a>
<ul class="submenu hide">
<li class="navLi"><a href="category.php?cid=7">XS</a></li>
</ul>
</li>
<li class="navLi"><a href="category.php?cid=2">CSS</a></li>
<li class="navLi"><a href="category.php?cid=3">JavaScript</a>
<ul class="submenu hide">
<li class="navLi"><a href="category.php?cid=5">Jquery</a>
<ul class="submenu hide">
<li class="navLi"><a href="category.php?cid=8">哈哈杂地工中</a></li>
<li class="navLi"><a href="category.php?cid=9">ajax</a></li>
</ul>
</li>
<li class="navLi"><a href="category.php?cid=6">JS高级</a></li>
</ul>
</li>
<li class="navLi"><a href="category.php?cid=4">PHP</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
jsfiddle查看
http://jsfiddle.net/E5U3s/
在
.submenu li属性内添加：white-space:nowrap。