Question

我正在跟进这个问题并回答： Sub-menu expanding parent div instead of displaying on top

如果上面的示例中的菜单下面有一个div，你如何保持1）div内容不会四处移动，以及2）div的大小不会移动，但保持响应？

例如，我从上面的链接分叉了js小提琴并创建了div id =“mytest”。当你将鼠标悬停在“关于我”链接上时，我希望菜单和“mytest”div完全独立。这是我的前叉：http://jsfiddle.net/nXqn8/

以下是代码：

    <div id="menu">
        <ul>
            <li><a id="" class="" href="">Home</a></li>
            <li><a id="" class="" href="">About Me</a>
                <ul class="sub-menu">
                    <li><a href="">Biography</a></li>
                    <li><a href="">Photo Galery</a></li>
                    <li><a href="">Foot Print</a></li>
                </ul>
            </li>
            <li><a id="" class="" href="">Expertise</a></li>
            <li><a id="" class="" href="">Projects</a>
                <ul class="sub-menu">
                    <li><a href="">Geo 228 Portal</a></li>
                    <li><a href="">NEP Application</a></li>
                    <li><a href="">Geo Address Book</a></li>
                    <li><a href="">Assets Management</a></li>
                </ul>
            </li>
            <li><a id="" class="" href="">Contact</a></li>
        </ul>
    </div>
<div id="mytest"> xxxxxxxxxxxxxxxxxxxxxxxxxx Please stop me from moving around!!! xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </div>

的CSS：

#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color: #666666;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
overflow: visible;
z-index: 2;
height: 35px; 

}


#menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
}

#menu li {
display: block;
width: 120px;
float: left;
border-right: 1px solid #999;
z-index: 4;
}

#menu a {
color: #ffffff;
font-weight: bold;
display: block;
text-align: center;
text-decoration: none;
text-transform: uppercase;
margin: 0;
padding: 10px 20px;
 }

#menu a:hover {
color: #000000;
margin: 5px 10px;
padding: 5px 10px;
background-color: #C0C0C0;
border-radius: 10px;
}

#menu ul.sub-menu {
display: none;
position: relative;
}

#menu ul.sub-menu li {
width: 200px;
background-color: #C0C0C0;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #666666;
}

#menu ul.sub-menu li a {
color: #000;
text-align: center;
margin: 5px 10px;
padding: 5px 10px;
}

#menu ul.sub-menu li a:hover {
color: snow;
background-color: #666666;
}

  #menu li:hover ul.sub-menu {
display: block;
z-index: 90;
}
 #mytest {
 background-color: red;   
}

最终，我有一些像你在accenture dot com顶部看到的主菜单。

谢谢！

Answer 1

定义您的#menu li position: relative和定义您的子菜单 #menu ul.sub-menu position: absolute; left: 0; {{1 }}

作为此css

top: 100%;

<强> Demo

Answer 2

#menu li {
    position:relative;
}

#menu ul.sub-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
}

#mytest {
    float:left;
    background-color: red;
    width:100%;
    text-align: center;
}

DEMO

保持子菜单在顶部并保持div的内容不移动和大小

2 个答案: