html - CSS垂直菜单栏，防止子菜单超过一定高度

Question

所以我在页面右侧放置了一个垂直菜单栏，但是我不希望子菜单向下交叉到主 div(蓝色背景)上。

我创建了一个 JS fiddle 链接来更清楚地显示这一点:http://jsfiddle.net/uzeZ6/

目前菜单栏会溢出到主 div 上。我该如何阻止这种情况发生？

谢谢

HTML

<div id="top">
<div id="nav">
<ul> 
<li><a href "#">Test </a>
<ul>
<li><a href "#">Link 1</a></li>
<li><a href "#">Link 1</a></li>
<li><a href "#">Link 1</a></li>
</ul>
</ul>
</li>

<ul> 
<li><a href "#">Test </a>
<ul>
<li><a href "#">Link 1</a></li>
<li><a href "#">Link 1</a></li>
<li><a href "#">Link 1</a></li>
</ul>
</ul>
</li>

<ul> 
<li><a href "#">Test </a>
<ul>
<li><a href "#">Link 1</a></li>
<li><a href "#">Link 1</a></li>
<li><a href "#">Link 1</a></li>
</ul>
</ul>
</li>

<ul> 
<li><a href "#">Test </a>
<ul>
<li><a href "#">Link 1</a></li>
<li><a href "#">Link 1</a></li>
<li><a href "#">Link 1</a></li>
</ul>
</ul>
</li>

</div> 
</div>

<div id ="main">text goes here
</div>

CSS

@charset"utf-8";
#top {
background-color: #CCC;
padding: 0px;
height: 150px;
width: 640px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;}
#top #nav {
margin: 0px;
padding: 0px;
}
#top #nav ul {
margin: 0px;
padding: 0px;
}
#top #nav ul li {
background-color: #666;
float: left;
position: relative;
border: 1px solid #000;
list-style-type: none;
}
#top #nav ul li:hover ul {
visibility: visible;
left: -152px;
top: -1px;
}
#top #nav ul li a {
font-size: 14px;
color: #FFF;
line-height: 30px;
text-decoration: none;
display: block;
height: 30px;
width: 150px;
}
#top #nav ul li ul {
position: absolute;
visibility: hidden;
}
#nav {
background-color: #333;
padding: 0px;
float: right;
height: 150px;
width: 180px;
}
#main {
height: 300px;
width: 640px;
background-color: #00F;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

Answer 1

这是 JS fiddle :http://jsfiddle.net/yE8ae/

您可以通过更改这些行上的 bottom 值来根据需要调整位置:

#top #nav ul:nth-child(3) li:hover ul { 
    top: initial; bottom: -33px;
}

#top #nav ul:nth-child(4) li:hover ul { 
    top: initial; bottom: -1px;
}

HTML

<div id="top">
    <div id="nav">
        <ul>
            <li><a href "#">Test 1</a>

                <ul>
                    <li><a href "#">Test 1, Link 1</a>
                    </li>
                    <li><a href "#">Test 1, Link 2</a>
                    </li>
                    <li><a href "#">Test 1, Link 3</a>
                    </li>
                </ul>
        </ul>
        </li>
        <ul>
            <li><a href "#">Test 2</a>

                <ul>
                    <li><a href "#">Test 2, Link 1</a>
                    </li>
                    <li><a href "#">Test 2, Link 2</a>
                    </li>
                    <li><a href "#">Test 2, Link 3</a>
                    </li>
                </ul>
        </ul>
        </li>
        <ul>
            <li><a href "#">Test 3</a>

                <ul>
                    <li><a href "#">Test 3, Link 1</a>
                    </li>
                    <li><a href "#">Test 3, Link 2</a>
                    </li>
                    <li><a href "#">Test 3, Link 3</a>
                    </li>
                </ul>
        </ul>
        </li>
        <ul>
            <li><a href "#">Test 4</a>

                <ul>
                    <li><a href "#">Test 4, Link 1</a>
                    </li>
                    <li><a href "#">Test 4, Link 2</a>
                    </li>
                    <li><a href "#">Test 4, Link 3</a>
                    </li>
                </ul>
        </ul>
        </li>
    </div>
    <p>&nbsp;</p>
</div>
<div id="main">text goes here</div>

CSS

@charset"utf-8";
 #top {
    background-color: #CCC;
    padding: 0px;
    height: 150px;
    width: 640px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#top #nav {
    margin: 0px;
    padding: 0px;
}
#top #nav ul {
    margin: 0px;
    padding: 0px;
    float: left;
}
#top #nav ul li {
    background-color: #666;
    float: left;
    position: relative;
    border: 1px solid #000;
    list-style-type: none;
    cursor: pointer;
}
#top #nav ul li:hover ul {
    display: block;
}

#top #nav ul:nth-child(3) li:hover ul { 
    top: initial; bottom: -33px;
}

#top #nav ul:nth-child(4) li:hover ul { 
    top: initial; bottom: -1px;
}


#top #nav ul li a {
    font-size: 14px;
    color: #FFF;
    line-height: 30px;
    text-decoration: none;
    display: block;
    height: 30px;
    width: 150px;
}
#top #nav ul li ul {
    position: absolute;
    display: none;
    right: 151px;
    top: -1px;
}
#nav {
    background-color: #333;
    padding: 0px;
    float: right;
    height: 150px;
    width: 180px;
}
#main {
    height: 300px;
    width: 640px;
    background-color: #00F;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}