Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS nav rollover problems

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #34706
    tobeeornot
    Member

    Hi,

    I am having trouble setting my sidebar nav so the rollover works on every tab. It only works on the first one but not on the rest and I am not sure why. Would appreciate any solutions.

    Here is the fiddle: http://jsfiddle.net/tobeeornot/7q6J2/4/

    Here is the relevant HTML and CSS code:




    /*sub-navigation*/
    #sub-navigation {
    margin: 0 0 30px 0;
    }

    #sub-navigation ul {
    list-style: none; /*gets rid of bullets*/
    }

    #sub-navigation ul li a {
    display: block; /*anchor linkls are by default inline*/
    background-color: #647484; /*default color for links*/
    color: white;
    font-family:Verdana, Geneva, sans-serif;
    font-size: 1.6em;
    padding: 10px 10px 10px 25px;
    position: relative;
    text-decoration:none; /*anchor links are underline by default'none' gets rid of this */
    margin: 0 0 5px 0;
    width: 233px;
    }

    #sub-navigation ul li span {
    position:absolute;
    right: 100%;
    top: 5px;
    width: 15px;
    height: 100%;
    background-color: #647484; /*default color for links*/
    background-image: url(../images/navshadow.png); /*shadow effect for background nubs*/
    background-position: right top;
    background-repeat: repeat-y; /*y - vertically positioned*/
    }


    #sub-navigation ul li:nth-child(2) a, #sub-navigation ul li:nth-child(2) a span {
    background-color: #728c8c;
    }

    #sub-navigation ul li:nth-child(3) a, #sub-navigation ul li:nth-child(3) a span {
    background-color: #768c72;
    }

    #sub-navigation ul li:nth-child(4) a, #sub-navigation ul li:nth-child(4) a span {
    background-color: #909673;
    }

    #sub-navigation ul li:nth-child(5) a, #sub-navigation ul li:nth-child(5) a span {
    background-color: #647484;
    }

    #sub-navigation ul li:nth-child(6) a, #sub-navigation ul li:nth-child(6) a span {
    background-color: #728c8c;
    }

    #sub-navigation li a:hover {
    text-decoration: none;
    background-color: #666;
    }

    #sub-navigation li a:hover span {
    background-color: #666;
    }
    #88778
    SgtLegend
    Member

    In your code you currently have the following:

    #sub-navigation li a:hover {
    text-decoration: none;
    background-color: #666;
    }

    #sub-navigation li a:hover span {
    background-color: #666;
    }

    When your working with child elements you need to remember that whatever selector chain you used before the next selector has to be the same or greater then the previous selector it the change won’t take effect. In the above code you posted the :nth-child() selectors are chained with the UL element while the hover states only direct themselves to the li element which is a lower level selector chain compared to the code before it.

    To fix this all you need to do is simply add UL to the selector chain and the hover state will work fine:

    #sub-navigation ul li a:hover {
    text-decoration: none;
    background-color: #666;
    }

    #sub-navigation ul li a:hover span {
    background-color: #666;
    }
    #88784
    tobeeornot
    Member

    Hey Sgt Legend,

    Thanks for the reply. Is the solution still valid?

    #88785
    tobeeornot
    Member

    Sure is. Many thanks for that and the thorough explanation!!!

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.