I'm having trouble getting the submenu to display correctly when hovering over parent list items. It's displaying in a strange way, is there a standard method for doing this? I can't seem to make any code adjustments work with my current setup.
<div id="navBar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Artist</a>
<ul>
<li><a href="#">sub menu item 1</a></li>
<li><a href="#">sub menu item 2</a></li>
<li><a href="#">sub menu item 3</a></li>
<li><a href="#">sub menu item 4</a></li>
</ul>
</li>
<li><a href="#">Apprentice</a>
<ul>
<li><a href="#">sub menu item 1</a></li>
<li><a href="#">sub menu item 2</a></li>
<li><a href="#">sub menu item 3</a></li>
<li><a href="#">sub menu item 4</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Store</a>
<ul>
<li><a href="#">sub menu item 1</a></li>
</ul>
</li>
</ul>
</div>
CSS
/*navigation bar*/
#navBar {
width: 100%;
float: left;
margin: 0;
padding: 0;
background-color: #000000;
border-bottom: 1px solid #ffffff;
}
#navBar ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0;
}
#navBar li {
float: left;
position:relative;
}
#navBar li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
color: #ffffff;
border-right: 1px solid #ffffff;
height: 30px;
font-size: large;
}
#navBar li:first-child a {
border-left: 1px solid #ffffff;
}
#navBar li a:hover {
color: #000;
background-color: #9DE4BD;
}
#navBar li ul {
position:absolute;
left:-9999;
}
#navBar li:hover > ul {
display: block;
position: relative;
left: 0px;
float: none;
clear: left;
}