I'm a beginner with dropdown menus and I'm struggling to prevent my dropdown menu from expanding and pushing the main buttons. I think it's related to a positioning adjustment, but I can't pinpoint where or what it is. Here is the link to the code on JSFiddle: http://jsfiddle.net/F4WvT/
Here is the HTML:
<div id="global-nav">
<ul>
<li><a href="#A">HOME</a>
</li>
<li><a href="#B">ABOUT</a>
<div id="global-subnav">
<ul>
<li><a href="#A">Sub Category 1</a></li>
<li><a href="#B">Sub Category 2</a></li>
<li><a href="#C">Sub Category 3</a></li>
<li><a href="#D">Sub Category 4</a></li>
<li><a href="#E">Sub Category 5</a></li>
<li><a href="#F">Sub Category 6</a></li> </ul>
</div>
</li>
<li><a href="#B">CONTENT</a>
<div id="global-subnav">
<ul>
<li><a href="#A">Sub Category 1</a></li>
<li><a href="#B">Sub Category 2</a></li>
<li><a href="#C">Sub Category 3</a></li>
<li><a href="#D">Sub Category 4</a></li>
<li><a href="#E">Sub Category 5</a></li>
<li><a href="#F">Sub Category 6</a></li> </ul>
</div>
</li>
<li><a href="#A">CONTACT</a>
</li>
</ul>
</div>
And here is the CSS:
<style type="text/css">
#global-nav {
width: 180px;
height: 40px;
background-image: none;
float: left;
position: static;
margin-left:0px;
}
#global-nav a {
color:#000;
font-size:12px;
cursor:pointer;
display:block;
width: 200px;
height: 40px;
text-align:center;
vertical-align: central;
text-decoration:none;
font-weight:bold;
}
#global-nav ul {
background: whitesmoke;
padding: 0;
margin: 0;
}
#global-subnav ul{
background: #D3171A;
position: relative;
width: 250px;
text-align:center;
left: 180px;
top: -55px;
}
#global-nav li {
list-style: none;
border-bottom: none;
border-width: 0px;
}
#global-nav ul ul li {
display:none;
}
#global-nav li:hover {
background: none;
}
#global-nav li:hover ul li {
display:block;
}
</style>
Any quick advice on how to keep my main navigation buttons stable will be greatly appreciated!