The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "SVG" Oct 14 - 6:30 PM Eastern
Get a free trial // Grow your CSS skills // Land your dream job

Roll over problem on Nav Bar

  • # January 25, 2010 at 5:58 am

    Hi All

    I have a problem with the last rollover image on my navigation bar. It worked OK until I added the "class last" to the unordered list for the right hand seperator image. The anchor link still works but the rollover is only working on the right hand side of the section. I have racked my brain trying to see why this is happening but to no avail.
    I hope one of you good people can look at it and show me where I have gone wrong.
    Thank you in advance for any help.



    # January 25, 2010 at 7:07 am

    From what I can see you need to put the .last on the li tag where it will stay on the a tag and on a:hover. As it is on the a tag and the image is only 30 px wide your a:hover is only affecting that width, not the whole li tag.

    # January 25, 2010 at 4:14 pm

    Thank you VIRTUAL for your time but as i see it, the .last is on the li tag.

    .navBar ul li .last {
    background-position:right center;

    The background hover image is 12px wide by 30px high and repeated in the x axis.


    # January 26, 2010 at 9:37 am

    Your class may be on the li in the CSS,

    .navBar ul li .last {
    background-position:right center;

    but it is on the a tag in the html

  • Contact Us

So your a:hover state is affecting your <a class="last"> as I said previously.

However, my previous solution does not work for you as you are using background images for the separators and they cannot be in two positions on the same tag, unless your li tags have a width and the background image for the "last" had the separator on each side. If you were using borders, you could place a left border on all the tags and on the "last tag" have a left and right border.

This solution will work for you, but it is a bit of a hack



.navBar li.last a:hover {
background-image: none;

It means you are adding an extra li tag which has no use but to add the separator at the end of the Contact tag and hiding the hover effect by showing background: none.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed