Question

我有一个工作菜单栏，当它打开时，右边的菜单栏会被按下，即使它不会影响打开的div。如何操纵我的编码以便我可以避免这种情况？

以下是我正在创建的网页的链接： http://adamdepolo.esy.es

<div id="menu_wrapper">
<div id="menu">
<div style="float:left;" id="menu1outer">
<a href=""><div class="menus"> <img src="images/menu.png" class="lines"></div></a>
<div id="submenus1" class="submenus">
<div id="left_menu_inside">
<p class="categories">Categories</p>
<ul id="menu_inside">
<li>Top Articles</li>
<li>Movies & Television</li>
<li>Science</li>
<li>Sports</li>
<li>Tech</li>
<li>Video Games</li>
<li>More...</li>
</ul>
</div>
</div>
</div>
<ul id="other_links">
<li><a href="">My Profile</a></li>
<li><a href="">Forums</a></li>
<li><a href="">Help</a></li>
</ul>
</div>
</div>

#menu_wrapper{
width:870px;
height:80px;
float:left;
margin-top:0px;
}

#menu{
width:600px;
height:40px;
float:left;
margin-left:5px;
margin-top:55px;
}

ul#other_links{
float:right;
margin:0
list-style:none;
margin-top:-5px;
}

ul#other_links li{
font-family: Tahoma, Geneva, sans-serif;
font-size:15px;
margin-right:15px;
margin-top:-20px;
display: inline-block;
}


ul#other_links li a {
color: white;
padding: 5px 10px;
text-decoration: none;
}

ul#other_links li a:hover {
background-color:black;
padding: 5px 10px;
}

.menus {
width:100px;
height:40px;
text-align: center;
background-color:#42618f;
border-right:1px solid #2b3f5d;
border-left:1px solid #2b3f5d;
border-top:1px solid #2b3f5d;
float:left;
margin-top:-16px;
margin-left:30px;
}

.lines{
margin-top:6px;
float:right;
margin-right:2px;
}

.menus a{
font-family: Tahoma, Geneva, sans-serif;
font-size:10px;
}

#menu1outer a{
font-family: Tahoma, Geneva, sans-serif;
font-size:12px;
color: white;
text-decoration:none;
line-height: 50px;
}

#menu_inside{
float:left;
}

#left_menu_inside{
float:left;
width:175px;
height:300px;
}

.submenus {
display:none;
width:585px;
height:300px;
text-align: center;
color: white;
background-color:#42618f;
border-right:1px solid #2b3f5d;
border-left:1px solid #2b3f5d;
border-bottom:1px solid #2b3f5d;
font-family: Tahoma, Geneva, sans-serif;
font-size:14px;
margin-top:25px;
margin-left:30px;
}

#menu1outer:hover #submenus1 {
display: block;
}

ul#menu_inside{
text-align:left;
margin-top:-10px;
padding-bottom:10px;
float:left;
color:#dadada;
}

ul#menu_inside li{
list-style-type:none;
padding-bottom:5px;
}

.categories{
font-family: Tahoma, Geneva, sans-serif;
float:left;
font-size:20px;
padding-bottom:10px;
border-bottom:1px solid white;
width:175px;
text-align:left;
margin-left:10px;
}

Answer 1

您的问题是您正在尝试显示具有position:static的元素，因此在显示它时，它会占用由推动其他元素引起的位置。但是，请按照这些规则更新您的CSS。

#menu1outer {
    position: relative;
}
.submenus {
    display: none;
    width: 585px;
    height: 300px;
    text-align: center;
    color: white;
    background-color: #42618f;
    border-right: 1px solid #2b3f5d;
    border-left: 1px solid #2b3f5d;
    border-bottom: 1px solid #2b3f5d;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    margin-top: 25px;
    margin-left: 30px;
    position: absolute;
    left: 0;
    top: 0;
}

我怎么做到这一点，当打开div时，右边的信息不会被推到下面？

1 个答案: