Hello,

I found this thread via a google search. I got a going pretty good but my sub menu isn't working correctly with hovering. Can anyone help me out here? I have wasted hours and hours trying to get this to work.

http://beachiappelli.com/

Layout Code:



Code:
<ul class="menu">
	<li class="music"><a href="#">music</a>
           <ul id="nav">
        	<li class="press"><a href="#">press</a></li>
                <li class="live"><a href="#">live</a></li>
                <li class="album"><a href="#">album</a></li>
           </ul></li>
	
    <li class="blog"><a href="#">blog</a></li>
    <li class="projects"><a href="#">projects</a></li>
    <li class="bio"><a href="#">bio</a></li>
</ul>

CSS
Code:
.music-header
{
position:absolute;
left:375px;
top:135px;
z-index:-1;
}


.menu {
	list-style: none;
           margin: 154px;
	
}
.menu li {	
	height: 114px;
	list-style: none;
	background-repeat: no-repeat;
}
#menu li ul {
	position: absolute;
	width: 10em;
	left: -9999em;
}
#menu li:hover ul, #nav li.sfhover ul {
	left: auto;
}
.menu li a, .nav li a:visited {
	display: block;
	text-decoration: none;
	text-indent: -9999px;
	height: 114px;
	background-repeat: no-repeat;
}

.music {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/music-roll.png); width: 170px;}
.music a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/music.png);}
.blog {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/blog-roll.png); width: 152px;}
.blog a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/blog.png);}
.projects {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/projects-roll.png); width: 213px;}
.projects a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/projects.png);}
.bio {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/bio-roll.png); width: 280px;}
.bio a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/bio.png);}


.press {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/press-roll.png); width: 190px;}
.press a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/press.png);}
.live {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/live-roll.png); width: 190px;}
.live a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/live.png);}
.album {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/album-roll.png); width: 190px;}
.album a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/album.png);}



ul.menu li a:hover {background: none;}
.menu li {float: left;}
.menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -9999em;
}