SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot capnhud's Avatar
    Join Date
    Nov 2005
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making main navigation element not change to nested li color on mouseover

    I have a drop down menu that when you mouseover the main navigation everything goes as expected in terms of the images switching for normal and mouseover, however I notice that as I mouseover the nested li items whichever main category that the nested li items belong to also takes on the background color of the nested li items instead of remaining the same hover color that it originally was. Is it possible to prevent this? I would like the main navbar have its background colors independent of the drop menu colors.


    Code CSS:
    * {
    margin: 0;
    padding: 0;
    }
    body {
    background: transparent url('sample_bg.png') repeat-x 0 0;
    }
    #bodywrapper {
    margin: 37px auto 0;
    max-width: 960px;
    min-width: 600px;
    padding: 10px;
    background: #fdfdfd;
    }
    * html #pagewrapper {
    width: 960px;
    }
    #header {
    margin: 0 0 4px;
    height: 100px;
    background: #ccc;
    }
    /* topmost navlink styles */
    #nav {
    margin: 0 auto;
    width: 960px;
    height: 40px;
    font: bold 13px/1.2 Arial;
     
    }
     
    #nav ul li {
        float: left;
        width: 120px;
        list-style: none;
    }
    #nav ul li a {
        display: block;
        visibility: visible;
        /*border: 1px solid #999;*/
        padding-top: 12px;
        height: 28px;
        background: url("nav_image.png") repeat-x -81px 100%;
        color: #ddd;
        text-decoration: none;
         text-align: center;
    }
    #nav ul li a:hover {
        background:url('nav_image.png') repeat-x -40px 0%;
    }
    /*----- Begin Second Level ----- */
    #nav ul,
    #nav ul ul li{
        position: relative;
        margin: 0;
        padding: 0;
    }
    #nav ul li ul {
        position: absolute;
        left: -999em;
        top: 40px;
     
        height: 40px;
    }
    #nav ul li:hover ul ul,
    #nav ul li.sfhover ul ul {
        left: -999em;
    }
    #nav ul li:hover ul,
    #nav ul li.sfhover ul,
    #nav ul ul li:hover ul,
    #nav ul ul li.sfhover ul {
        left: auto;
    }
    #nav ul ul.subhor-1item li {
        width: 120px;
    }
    #nav ul ul.subhor-2items li {
        width: 240px;
    }
    #nav ul ul.subhor-3items li {
        width: 160px;
    }
    #nav ul ul.subhor-4items li {
        width: 120px;
    }
    #nav ul ul ul li {
        clear: left;
    }
    /****** Link Styling ******/
    #nav ul li:hover a,
    #nav ul li.sfhover a,
    #nav ul li a:hover {
        background:#777;
        color: #eee;
    }
    #nav ul li a:hover {
            background: url('nav_image.png') repeat-x -40px 0%;
    }
    #nav ul li ul li a:hover {
        background: url('subver_bg.png');
        color: #fff;
    }
    #contentwrapper {
    margin-top: 5px;
    height: 750px;
    background: #e3e3e2;
    }


    When I edit the style for

    #nav ul li:hover a,
    #nav ul li.sfhover a,
    #nav ul li a:hover {
    background:#777;
    color: #eee;
    }

    then all the lower levels take on the background color of the main navigation. When in reality I would like to make them separate.
    I know I am in my own little world. But its OK "They Know Me HERE"

  2. #2
    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)
    Just define styles for the lower levels
    Code:
    #nav ul li li:hover a,
    #nav ul li li.sfhover a,
    #nav ul li li a:hover {
    background:#777;
    color: #eee;
    }
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    In the "first-level" section, you have this:
    #nav ul li a:hover {
    background:url('nav_image.png') repeat-x -40px 0%;
    }

    In the "link-styling" section, you have this:
    #nav ul li a:hover {
    background: url('nav_image.png') repeat-x -40px 0%;
    }

    The trick to writing CSS for dropdowns is to reduce the amount of extra code as much as possible.

    When setting background colours on hovers, you need to be careful when mixing li's and a's.

    I see this:
    #nav ul li:hover a,
    #nav ul li.sfhover a,
    #nav ul li a:hover {
    background:#777;
    color: #eee;
    }
    And notice the same colours are being hit for hovering li's and hovering a's.

    So even if you later write new styles for sub-subs li's, you still have the old anchor styling, or vice versa. Choose one element to get mouseover styles. If your anchors are blocks (and in your case they are) then have the anchors carry all the styles.

    Code:
    #nav ul li a:hover {
            background: url('nav_image.png') repeat-x -40px 0%;
    }
    #nav ul li ul li a:hover {
        background: url('subver_bg.png');
        color: #fff;
    }
    If you are going to set a background using shorthand for an anchor, then when overriding it with the background of a sub-anchor, you either need to be specific ("background-image: url(subver_bg.png);") or re-state the other stuff ("background: url(subver_bg.png) no-repeat 0 0;")
    (I just made up values for the others, I don't know what the image really needs).

    sub-sub anchor isn't being given a new bg colour, so it makes sense that it's getting old bg colour, and esp since you say
    "all li's who are decendants of #nav ul and are hovered, get this background colour"
    and don't later make a new rule for sub-sub li's.


    One way to reduce code complexity is to remove the nav wrapper. It it's not being used as a necessary styling hook (and I don't see that it is) then you don't need it.

    <div id="nav">
    <ul>
    <li>anchor here...</li>
    ...</ul>
    </div>

    Instead of that, just
    <ul id="nav">
    <li>anchor here...</li>
    </ul>

    because then your CSS gets easier to write:

    /* topmost navlink styles */
    #nav {
    margin: 0 auto;
    width: 960px;
    height: 40px;
    font: bold 13px/1.2 Arial;

    }

    #nav li {
    float: left;
    width: 120px;
    list-style: none;
    }



    #nav ul will always mean a sub-ul. #nav will always mean the menu itself, which is the main ul.

    Then, don't forget those who do not or cannot mouse:

    #nav a:focus, #nav a:hover {
    color: #eee;
    background: #777 url('nav_image.png') repeat-x -40px 0%;
    }

    And sub-anchors are now
    #nav ul a:focus, #nav ul a:hover {
    color: #fff;
    background-image: url('subver_bg.png');
    }

    And no li:hover issues here.

    (that last statement may inherit the repeat-x and coords from earlier... I didn't check but when coding I don't leave it up to guessing... if I don't want those properties on the sub-anchor I explicitly code them out)

    Does that help?

  4. #4
    SitePoint Zealot capnhud's Avatar
    Join Date
    Nov 2005
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see what your saying I will give this a rework and see how it goes. Thanks for the suggestions as to what is causing my problems.
    I know I am in my own little world. But its OK "They Know Me HERE"


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
  •