Question

所以我有一个位于页面右侧的veritcal菜单栏，但是我不希望子菜单跨越到主div（蓝色背景）。

我创建了一个JS小提琴链接，以显示更清晰：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小提琴：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;
}

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

1 个答案: