SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Retain text color on hover out

    Hello

    I have a dropdown menu with hover effect. Work-in-progress is here: studioalice.se/pep/menu.html

    But I have run into a problem. The top line links are blue, and on hover there is a blue background and the text turns black. Also are the child list tags shown, with the same background.

    When moving away from the topmenu link the text reverts back to blue.

    Is there a way to keep the text black even when moving down the child menu?

    Regards, Magnus

  2. #2
    Visible Ninja bronze trophy
    JeffWalden's Avatar
    Join Date
    Sep 2002
    Location
    Los Angeles
    Posts
    1,709
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Magnus,

    In order to accomplish this you'll need to use a bit of javascript to change the class of the top menu item. I remember having this issue a few months ago and that's the path I went.

    That being said, there's some great scripts out there like suckerfish from A List Apart that you may want to check out. This script solves this problem for you and ensures that it's cross browser compatible. If you're trying to write your own version then I congratulate you on your patience but just be sure to test it against all versions of the most popular browsers. I guarantee you'll find bugs.

    Jeff
    TAKE A WALK OUTSIDE YOUR MIND.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    Visible Ninja bronze trophy
    JeffWalden's Avatar
    Join Date
    Sep 2002
    Location
    Los Angeles
    Posts
    1,709
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    I knew Ryan would step in here. Magnus, listen to what he says... he's pretty much a genius.
    TAKE A WALK OUTSIDE YOUR MIND.

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tips

    I tried both Suckerfish and the thread Ryan suggested. But, I could not get my head around all childs, sibblings and nested selectors

    (Why aren't there no "mother" selector )

    So, I took the highway and changed #nav a to black. I will leave it so for the moment – and here what the designer thinks

    -- Magnus

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again

    I have a follow up question on the menu (in-progress here: studioalice.se/pep/ )

    Option 1: How to set a "auto" width on the submenu? I like to have one-line links in the submenu (hover over "Välj process"). And, is it possible to have a min-width (to avoid errors like in "Kundcase")?

    Or

    Option 2: I can set the width on the submenu. And if so, is it doable to have less space between the lines in the link (li tags) then between each link?

    -- magnus

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can do a fluid width submenu depending on the content but it's a little complicated.

    Regarding your original question the top level anchor can have a different colour to the rollover colours on the drop down links and stay highlighted quite easily. You just style the first level with what you want and then change it for the nested level.

    e.g.
    li:hover a {color:red}/* top row*/
    li:hover li a{color:blue}/* normal sub links because they would be affected by the above rule*/
    li:hover li:hover a{color:green}/* hovered sub links */

    and so on.... (the above is pseudo code and would need to be adjusted for your example).

    to have less space between the lines
    Same as above just target the nested links with the different styles you need.
    Code:
    #nav li a {
        text-align: center;
        text-decoration: none;
        line-height: 2.5em;
        color: black;
    }
    #nav li li a {line-height:1.5em}
    The nested elements can always be uniquely targeted -you just have to cancel out what was set on the parent.

    It can be a little confusing but it's just basic css and keeping track of what's already been set.

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great Paul

    I will try your suggestion. Many thanks.

    -- Magnus


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •