Comments on: Simple Navigation with CSS Image Replacement

By: CSS Image Replacement Help - DesignersTalk

CSS Image Replacement Help - DesignersTalk — Thu, 24 Feb 2011 14:47:23 +0000

[...] Image Replacement Help i've applied this CSS Image Replacement method to my navigation. however, problem is that in IE 6-9, the background image goes out of [...]

By: Rod

Rod — Sat, 22 Jan 2011 10:21:59 +0000

Brilliant!!! Helped me a LOT!!!

By: Bill Keller

Bill Keller — Fri, 09 Jul 2010 13:41:56 +0000

Richard, you'll need to fix the HTML for your sub-navigation, it should be:

Discography
Topic 1

And to set a new background image on .dropdown, you'll just need to get more specific with your CSS selectors, for example:

#blackEyedSusanNav li ul.dropdown a {background-image: foo;}

Then you can move on to tackling the next steps.

By: Richard

Richard — Mon, 28 Jun 2010 12:44:43 +0000

Thanks for a great tute - have got it working fine but was wondering how to incorporate a drop down menu in the navigation. I've tried using a path of id's to target the hover state and then trigger a drop down. I can sort of get it working at the link here but the hover state is the whole nav menu area but for this exercise I only want the drop down to appear when the discography link is hovered over. Also it's repeating the image of the main nav as a background in the submenu.

By: gogetsome

gogetsome — Thu, 08 Apr 2010 19:10:28 +0000

Great solution! I have the main navigation working perfectly. I want to also have a sub nav using the same technique. I have that set up and have everything working as expected except the hover state for the sub nav. How can I make the main nav section active and also have the sub nav page also active???

By: @gillian

@gillian — Thu, 01 Apr 2010 19:41:24 +0000

Thanks so much! This was really helpful!

By: Bill Keller

Bill Keller — Thu, 25 Mar 2010 10:29:27 +0000

@Julie, glad you're finding it helpful. This is just a normal CSS selector. You can use any selectors necessary to "get your navigation to stay in the :hover state". Follow the normal CSS selector rules & you'll be in good shape. In the example I provide, any Anchor tag inside of an LI, inside of an UL, on a page with a Body id="about" will be selected.

By: Julie

Julie — Wed, 24 Mar 2010 20:01:30 +0000

“Update:

To get your hover state to stay in the hover state, to mark the users currently selected page for example, I like to use an ID or class on the body tag.

For example, on a contact page add:

And in your CSS hover state, add a line for body#contact:

1. ul li a:hover,
2. body#contact ul li a {
3. background-position: 0 -66px;
4. }
”

Thanks for the tutorial. It’s very helpful. I’m relatively new to a lot of this. Regarding the update quoted here, what is recommended when the image replacement navigation is in a div tag, versus floating loose in the body? The body ID isn’t working for me. Would a class solve this? Thanks much!

By: ADGA Intro to Web Design » Blog Archive » More questions from class

ADGA Intro to Web Design » Blog Archive » More questions from class — Sat, 31 Oct 2009 15:13:00 +0000

[...] Simple Navigation with CSS Image Replacement [...]

By: Huw Rowlands

Huw Rowlands — Mon, 17 Aug 2009 20:26:23 +0000

This tut has helped over and over again. No other one helps just as much as this one does. Thanks!