Question

html section --------------------------------------------- ------------------------------------------

<!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 section --------------------------------------------- ------------------------------

<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/ 描述图片，在第一条评论中留下

Answer 1

DEMO

将类添加到第三和第四个子菜单：

<ul class="sub three">
<ul class="sub four">

相应地修改margin-left：

.sub.three {
    margin-left:-141px;
}
.sub.four {
    margin-left:-147px;
}

当水平子菜单超出父菜单的边缘时，它应该粘在边缘上

1 个答案: