I have a functioning menu bar, but when it expands, the content below is pushed down even though it should not be affected. How can I adjust my code to prevent this issue?
View my website here:
<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;
}