Suckerfish dropdown not hovering properly

**lukasgraphics** · Dec 9, 2012 11:40

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

**Paul O'B** · Dec 9, 2012 13:25

Hi,

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

Code:

#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.

Code:

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

Code:

#nav li.sfhover ul

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

Code:

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

**lukasgraphics** · Dec 9, 2012 17:35

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">

<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/...sic-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/...log-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/...cts-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/...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/...ess-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/...ive-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/...bum-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

**ralph.m** · Dec 9, 2012 18:04

You can do those things by adding these styles:

Code:

.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** · Dec 9, 2012 18:59

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** · Dec 9, 2012 19:05

Never mind my above post. I got it working.

http://beachiappelli.com/

**ralph.m** · Dec 9, 2012 19:06

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** · Dec 9, 2012 19:32

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.

**ralph.m** · Dec 9, 2012 19:36

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** · Dec 15, 2012 08:51

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/

Code:

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/...sic-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/...log-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/...cts-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/...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/...ess-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/...ive-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/...bum-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/...can-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/...rty-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/...its-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/...ngs-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/...sic-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/...log-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/...cts-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/...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/...ess-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/...ive-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/...bum-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/...can-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/...rty-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/...its-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/...ngs-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/...sic-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/...log-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/...cts-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/...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/...ess-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/...ive-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/...bum-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/...can-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/...rty-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/...its-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/...ngs-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;
}

**Paul O'B** · Dec 15, 2012 09:48

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.

Code:

#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** · Dec 15, 2012 20:24

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

**ronpat** · Dec 15, 2012 20:41

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

User Tag List

Thread: Suckerfish dropdown not hovering properly

Thread Tools

Display

Suckerfish dropdown not hovering properly

Bookmarks

Bookmarks

Posting Permissions