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

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Rollover Navigation…

  • # January 10, 2010 at 10:36 pm

    I’m working on a site where I want to include a little design element when you rollover a link.

    It is kind of working at the moment, however I would like the text to be below the little icon you seen when in the hover state.

    Any ideas? Do I need to put something in a separate div?…


    # January 11, 2010 at 4:27 am

    This reply has been reported for inappropriate content.

    Firstly I would say that you need to rework that area a little, using padding like that isnt too bad but you really dont need it. But with the need for speed, modify the bolded lines and it should work – you might want to check IE though… padding + IE = hell – which is why I would avoid using it as well…

    #navigation a {
    padding:10px 10px 18px;

    #navigation a:hover, ul#nav li a:active {
    background:url(images/hoverbutton.jpg) no-repeat center 25px;

Viewing 2 posts - 1 through 2 (of 2 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