Suckerfish dropdown not hovering properly

lukasgraphics · December 9, 2012, 5:40pm

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:

<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


.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;
}

PaulOB · December 9, 2012, 7:25pm

Hi,

The menu isn’t hovering because you have mixed an ID instead of a class here:


#menu li ul {
	position: absolute;
	width: 10em;
	left: -9999em;
}
#menu li:hover ul, #nav li.sfhover ul {
	left: auto;
}

You don’t have an id of menu you have a class.

e.g.


.menu li ul {
	position: absolute;
	width: 10em;
	left: -9999em;
}
.menu li:hover ul, #nav li.sfhover ul {
	left: auto;
}

You’ve also mixed #nav in their also which is the ie6 fix for hover and you don’t have an id of #nav.


#nav li.sfhover ul

If you are supporting ie6 then you will need to add an id of #nav to the ul.


<ul id="nav" class="menu">

lukasgraphics · December 9, 2012, 11:35pm

Thanks so much. That was pretty stupid on my part. At least the first part. I should have figured that out.

One final question:

How do I narrow the spacing between the submenu listings so that they are stacked on top of each other? Also, how do I move the submenu of music up so its 5px or so under the music.png?

Each submenu graphic is 30px tall. The main menu has a height of 114 px because of depth of the letter “j” in the projects.png. So the spacing would conflict I believe. I believe I have to do something with z-index but I’m not really sure how to do it.

Thanks a ton!

http://beachiappelli.com/

Here’s my updated code:

<ul id=“nav” class=“menu”>

&lt;li class="music"&gt;&lt;a href="#"&gt;music&lt;/a&gt;
       &lt;ul id="nav"&gt;
    	&lt;li class="press"&gt;&lt;a href="#"&gt;press&lt;/a&gt;&lt;/li&gt;
            &lt;li class="live"&gt;&lt;a href="#"&gt;live&lt;/a&gt;&lt;/li&gt;
            &lt;li class="album"&gt;&lt;a href="#"&gt;album&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;&lt;/li&gt;

&lt;li class="blog"&gt;&lt;a href="#"&gt;blog&lt;/a&gt;&lt;/li&gt;
&lt;li class="projects"&gt;&lt;a href="#"&gt;projects&lt;/a&gt;&lt;/li&gt;
&lt;li class="bio"&gt;&lt;a href="#"&gt;bio&lt;/a&gt;&lt;/li&gt;

</ul>

CSS

.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;
}

.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;
}

#nav li.sfhover ul

ralphm · December 10, 2012, 12:04am

You can do those things by adding these styles:

.menu li li, .menu li li a, .nav li li a:visited {
  height: auto;
}

#nav ul {
margin-top: -40px;
}

However, be aware that you still have the same ID on the top nav and the sub nav (id=“nav”), but you are only allowed to use an ID once, so watch out for that. (Browsers may let you off, but it’s not a good practice.)

lukasgraphics · December 10, 2012, 12:59am

Alright that worked and I’ll take your advice and made my sub nav (id=“nav2”).

What’s causing the extra spacing between Press shot, Live performances, and Misc. Music graphics? I want these to be stacked on top of each other with no space in between the graphics.

I tried this but it didn’t work (graphics are each 30 px tall)

.menu2 li {
height: 30px;
list-style: none;
background-repeat: no-repeat;
}

lukasgraphics · December 10, 2012, 1:05am

Never mind my above post. I got it working.

http://beachiappelli.com/

ralphm · December 10, 2012, 1:06am

Those styles you put in do work for me. Make sure to refresh your browser a few times, or empty the cache, to see the changes. If that doesn’t work, what browser are you using?

lukasgraphics · December 10, 2012, 1:32am

Yeah they work. I just did some extra formatting.

Thanks so much! I spent so many hours to get this to work. I just don’t understand CSS yet. Enough to manipulate but starting something like this from stratch is a disaster.

ralphm · December 10, 2012, 1:36am

Glad it’s working. You seem to have done alright to me. You just learn over time by tinkering with these things and seeing how others have done them.

lukasgraphics · December 15, 2012, 2:51pm

Hello,

One thing I can’t figure out how to do. I want to add space between the menu graphic “Projects” and the top of the submenu “American” so that this submenu sits below the tail of the letter “J” in the word “projects”. I want to do this without affecting the vertical spacing of the submenu under music. Can someone help me please?
It would be greatly appreciated!

http://beachiappelli.com/music/album-artwork/

ul.white-menu2 {
z-index: 1000;
}

body.page-id-51 {
background-image:url('http://beachiappelli.com/wp-content/themes/dynamik/css/images/background.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center top;
z-index:-1;
}

.music-header
position:fixed;
top: 30px;
z-index:-1;
}

.white-music-header
{
position:fixed;
margin-left:auto;
margin-right:auto;
z-index:-1;
}


.white-menu {
	list-style: none;
           margin-top: -30px;
           margin-left: 0px;
	   float: left;	
	
}
.white-menu li {	
	height: 86px;
	list-style: none;
	background-repeat: no-repeat;
}

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



.white-music {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/white-music-roll.png); width: 169px;}
.white-music a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/white-music.png);}
.white-blog {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/white-blog-roll.png); width: 122px;}
.white-blog a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/white-blog.png);}
.white-projects {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/white-projects-roll.png); width: 167px;}
.white-projects a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/white-projects.png);}
.white-bio {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/white-bio-roll.png); width: 224px;}
.white-bio a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/white-bio.png);}
.white-press {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/press-roll.png); width: 190px;}
.white-press a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/press.png);}
.white-live {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/live-roll.png); width: 190px;}
.white-live a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/live.png);}
.white-album {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/album-roll.png); width: 190px;}
.white-album a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/album.png);}
.white-american {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/american-roll.png); width: 188px;}
.white-american a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/american.png);}
.white-liberty {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/liberty-roll.png); width: 188px;}
.white-liberty a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/liberty.png);}
.white-portraits {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/portraits-roll.png); width: 188px;}
.white-portraits a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/portraits.png);}
.white-weddings {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/weddings-roll.png); width: 188px;}
.white-weddings a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/weddings.png);}





ul.white-menu li a:hover {background: none;}
.white-menu li {float: left;}
.white-menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
}


#white-nav li:hover ul ul, #white-nav li.sfhover ul ul {
	left: -9999em;
}

#white-nav li.sfhover ul

.white-menu li li, .menu li li a, .white-nav li li a:visited {
  height: auto;
}

#white-nav ul {
margin-top: -30px;
}

ul.white-menu3 {
z-index: 1000;
}




.red-music-header
{
position:fixed;
margin-left:auto;
margin-right:auto;
z-index:-1;
}


.red-menu {
	list-style: none;
           margin-top: -25px;
           margin-left: 183px;
	   float: left;	
	
}
.red-menu li {	
	height: 114px;
	list-style: none;
	background-repeat: no-repeat;
}

.red-menu2 li {	
        margin-left: 30px;        
        height: 30px;
	list-style: none;
	background-repeat: no-repeat;
}



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



.red-music {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/music-roll.png); width: 170px;}
.red-music a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/music.png);}
.red-blog {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/blog-roll.png); width: 152px;}
.red-blog a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/blog.png);}
.red-projects {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/projects-roll.png); width: 213px;}
.red-projects a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/projects.png);}
.red-bio {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/bio-roll.png); width: 280px;}
.red-bio a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/bio.png);}
.red-press {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/press-roll.png); width: 190px;}
.red-press a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/press.png);}
.red-live {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/live-roll.png); width: 190px;}
.red-live a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/live.png);}
.red-album {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/album-roll.png); width: 190px;}
.red-album a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/album.png);}
.red-american {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/american-roll.png); width: 188px;}
.red-american a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/american.png);}
.red-liberty {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/liberty-roll.png); width: 188px;}
.red-liberty a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/liberty.png);}
.red-portraits {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/portraits-roll.png); width: 188px;}
.red-portraits a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/portraits.png);}
.red-weddings {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/weddings-roll.png); width: 188px;}
.red-weddings a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/weddings.png);}





ul.red-menu li a:hover {background: none;}
.red-menu li {float: left;}
.red-menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
}


#red-nav li:hover ul ul, #red-nav li.sfhover ul ul {
	left: -9999em;
}

#red-nav li.sfhover ul

.red-menu li li, .menu li li a, .red-nav li li a:visited {
  height: auto;
}

#red-nav ul {
margin-top: -35px;
}


#red-nav3 ul {
margin-top: -15px;
}


.bio-music-header
{
position:fixed;
margin-left:auto;
margin-right:auto;
z-index:-1;
}


.bio-menu {
	list-style: none;
           margin-top: -50px;
           margin-left: 249px;
	   float: left;	
}


.bio-menu li {	
	height: 86px;
	list-style: none;
	background-repeat: no-repeat;
}

.bio-menu2 li {	
        margin-left: 50px;
        height: 30px;
	list-style: none;
	background-repeat: no-repeat;
}

.bio-menu3 li {	
        margin-left: 20px;
        height: 30px;
	list-style: none;
	background-repeat: no-repeat;
}

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


.bio-music {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/white-music-roll.png); width: 169px;}
.bio-music a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/white-music.png);}
.bio-blog {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/white-blog-roll.png); width: 122px;}
.bio-blog a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/white-blog.png);}
.bio-projects {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/white-projects-roll.png); width: 167px;}
.bio-projects a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/white-projects.png);}
.bio-bio {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/white-bio-roll.png); width: 224px;}
.bio-bio a {background-image: url(http://beachiappelli.com/wp-content/themes/dynamik/css/images/white-bio.png);}


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


ul.bio-menu li a:hover {background: none;}
.bio-menu li {float: left;}
.bio-menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
}


#bio-nav li:hover ul ul, #bio-nav li.sfhover ul ul {
	left: -9999em;
}

#bio-nav li.sfhover ul

.bio-menu li li, .menu li li a, .bio-nav li li a:visited {
  height: auto;
}

#bio-nav ul {
margin-top: -15px;
}



#bio-nav3 li:hover ul ul, #bio-nav3 li.sfhover ul ul {
	left: -9999em;
}

#bio-nav3 li.sfhover ul

.bio-menu3 li li, .menu li li a, .bio-nav li li a:visited {
  height: auto;
}


#bio-nav3 ul {
margin-top: -15px;
}

PaulOB · December 15, 2012, 3:48pm

Hi,

If you only want that single menu item moved then you can do it via the class you have on that item.

e.g.


#white-nav ul.white-menu3{margin-top:0}

If you want all items at the same point then just remove the class from the above rule.

Note you have used the same ID more than once in that menu which is not allowed (e.g. you have used id=“white-nav2” in 2 places). Id’s are unique and there should only be one of the same name on a page.

lukasgraphics · December 16, 2012, 2:24am

Thanks again. As far as using the same ID more than once business…are you talking about in my CSS or my HTML?

ronpat · December 16, 2012, 2:41am

In the HTML. An id can only occur once on a page.