Drop Down Menu with CSS Sprite Navigation

[kennyk3]

I need to put a drop down menu on a navigation that’s based on one image (CSS Sprite). I’ve been trying for a few hours and I just can’t figure it out. Here’s the HTML:

Storage Auctions


Blog


About


Contact


FAQ

I need the drop down to go under the “About” link. I realize it had to go in the ‘li’ tag, but I can’t get the CSS right. Here’s the current CSS for this sprite:

ul#nav {

margin:75px 0 0 0;

padding:0;

list-style:none;

clear: both;

}



#nav li {

overflow:hidden;

text-indent:-9999px;

display:inline;

float:left;

width: 398px;

}



#nav li a {

background:url(../images/nav-sprite.jpg) no-repeat;

width: 398px;

height: 40px;

display:block;

}





#nav li.nav-1 {width:85px; height:40px;}

#nav li.nav-1 a:hover{background-position:0px -40px;}



#nav li.nav-2 {width:80px; height:40px;}

#nav li.nav-2 a:hover{background-position:-85px -40px;}

#nav li.nav-2 a{background-position:-85px 0px;}



#nav li.nav-3 {width:82px; height:40px;}

#nav li.nav-3 a:hover{background-position:-165px -40px;}

#nav li.nav-3 a{background-position:-165px 0px;}



#nav li.nav-4 {width:97px; height:40px;}

#nav li.nav-4 a:hover{background-position:-247px -40px;}

#nav li.nav-4 a{background-position:-247px 0px;}



#nav li.nav-5 {width:54px; height:40px;}

#nav li.nav-5 a:hover{background-position:-344px -40px;}

#nav li.nav-5 a{background-position:-344px 0px;}

Any help would be greatly appreciated!

[kennyk3]

Would love some help with this. Still can’t figure it out. Here’s an exact example:

http://jsfiddle.net/kennyk3/TTDNp/

[Paulie_D]

You haven’t defined any CSS for the sub menu items and the sprite doesn’t include them either.

[Paulie_D]

Is there a reason for the sprite…doesn’t look as though there is anything there already that can’t be achieved via ordinary CSS3?

[kennyk3]

@Paulie_D

That’s what I need help with. I’ve tried a lot of different CSS and just can’t get it to work.

Reason for the sprite… I know how do use them and they work well. I don’t know much about CSS3.

[Paulie_D]

Firstly, you’d have to re-do the sprite with all of the sub-navigation and go from there.

You might also want to look at this:https://css-tricks.com/css-sprites-workflow/

I know sprites are the ‘in’ think right now but they are incredibly inflexible when it comes to scaling or updating your nav.

From what I can see, the only thing the sprite is doing now is adding a text-shadow which is incredibly simple. Obviously, that’s an issue for older browsers but a simple fallback would suffice there.

[kennyk3]

Yeah, I re-read your first post that said “the sprite doesn’t include them” and it clicked. So I’m gonna add those images to the sprite and fiddle with the positioning.

I understand there inflexibility. I do enjoy creating them though and like how they only use one image. I do want to move away from them, but I’d like to keep them on this particular site.

Thank you for your input.

[Paulie_D]

Here’s a sample dropdown (without sprites) that might help when combined with the workflow that Chris suggested: http://tinkerbin.com/QBvwRCKA

[kennyk3]

I have given up on the CSS sprite drop down. I just spent too much time on it. And, it’ looks about the same with the Arial font.

But, thanks for the help.

[Author]

Posts