html 部分-------------------------------------------- ------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul class="main">
<li><a href="javascript:void(0)">one</a></li>
<li class="parent">
<a href="javascript:void(0)">two</a>
<ul class="sub">
<li><a href="javascript:void(0)">sub one</a></li>
<li><a href="javascript:void(0)">sub two</a></li>
<li><a href="javascript:void(0)">sub three</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">three</a>
<ul class="sub">
<li><a href="javascript:void(0)">sub one</a></li>
<li><a href="javascript:void(0)">sub two</a></li>
<li><a href="javascript:void(0)">sub three</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">four</a>
<ul class="sub">
<li><a href="javascript:void(0)">sub one</a></li>
<li><a href="javascript:void(0)">sub two</a></li>
<li><a href="javascript:void(0)">sub three</a></li>
</ul>
</li>
</ul>
样式部分---------------------------------------- ------------------------------
<style>
ul, li {
margin:0;
padding:0;
}
.main > li {
display:inline-block;
float:left;
position:relative;
padding:1px;
}
.main > li > a {
display:block;
padding:10px 20px;
}
.sub {
display:none;
position:absolute;
width:300px;
margin-left:-1px;
margin-top: -1px;
}
.sub li {
display:block;
float:left;
border:1px solid #000;
border-left:0;
border-right:0;
}
.sub li:first-child {
border-left:1px solid #000;
}
.sub li:last-child {
border-right:1px solid #000;
}
.sub a {
display:block;
padding:10px;
}
.main > li:hover .sub {
display:block !important;
}
.main > li:hover {
padding:0;
border:1px solid #000;
}
.parent:hover {
border-bottom:1px solid #fff !important;
}
.parent a {
border-bottom:1px solid #fff !important;
position:relative;
z-index:10;
}
</style>
</body>
</html>
代码结束---------------------------------------- ------------------------------ http://jsfiddle.net/SLDmd/ 描述图片，留在第一条评论
最佳答案
将类添加到第三个和第四个的子菜单:
<ul class="sub three">
<ul class="sub four">
相应地为它们修改margin-left:
.sub.three {
margin-left:-141px;
}
.sub.four {
margin-left:-147px;
}
关于html - 当水平子菜单超出父菜单的边缘时，它应该贴在边缘，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20524415/