CODEWITHSUNDEEP
css
user2293267
user2293267

Reputation: 21

CSS List Item hover not applying correctly

I have a website I am developing: http://designs.totaleeyou.com/rnresources/. On the main menu items I have a li:hover:after effect (a tringle that hovers above the li item). However this hover effect should only be applied to li that fall under the nav-pills class div's, yet is being applied to none nav-pills li. Additionally, the li hover should be blue in the header, and white at the footer, but the hover effect only applies the white to both, yet when the li is active the correct colors are being applied.

ul.menu {
    list-style-type:none;
}
ul.nav-pills {
    list-style-type:none;
    margin:0;
    padding:0;
}
header ul.nav-pills a {
    text-transform:uppercase;
    color:#17469e;
}
footer ul.nav-pills a {
    text-transform:uppercase;
    color:#ffffff;
}
ul.nav-pills a:hover,a:focus {
    color:#cf3b3b;
    transition:all 0.2s linear;
}
ul.nav-pills > li {
    position:relative;
    display:inline;
    margin:50px 0 0 50px;
}

ul.nav-pills > li + li {
    margin-left:40px;
}
ul.nav-pills li.active:after, li:hover:after {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 0 15px;
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -15px;
    top: -35px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
header ul.nav-pills li.active:after, li:hover:after {
    border-color: #17469e transparent transparent transparent;
}
footer ul.nav-pills li.active:after, li:hover:after {
    border-color: #ffffff transparent transparent transparent;
}

Upvotes: 0

Views: 56

Answers (2)

Morgan
Morgan

Reputation: 81

As I can't add a comment because of reputation to Thgaskell's answer..

Buy why? The footer li:hover:after should only apply to the footer element, as it is the child of the footer the same as with the header. If I was to apply a different background color to container for the header and footer, there would be no overriding, as the container is being defined to only the parent element.

That is why I am confused, the li.hover:after is assigned to both the footer and header elements, with each having its own specific color. The li.active:after for both the header and footer work correctly. Why not the li.hover:after.

Thanks!

Upvotes: 0

thgaskell
thgaskell

Reputation: 13226

Your hover rules for the footer are overriding the header since they are using the same selector (li:hover:after), and footer is applied last.

enter image description here

Upvotes: 1

Related Questions