CODEWITHSUNDEEP
cssmenu
Hai Tran
Hai Tran

Reputation: 17

Make border-bottom of active li override on border-bottom of menu in CSS

Here is my fiddle: http://jsfiddle.net/58kvpdpv

Hi, please help me with the idea for active menu have border-bottom override on navigation border-bottom. I tried but the active element always under the line, not override. Any suggestion is a big help.

ul {
list-style-type: none;
padding-left: 0;
margin: 0;
border-bottom: 5px solid #ccc; <----- MAIN LINE FOR WHOLE MENU
}
ul>li.active {
border-bottom: 5px solid #555; <----- I WANT THIS OVERRIDE ON THE LINE
}

Upvotes: 1

Views: 6307

Answers (1)

Azrael
Azrael

Reputation: 1094

By adding a negative margin at your bottom (-5px) because your border is 5px thick you would solve this problem: jsfiddle

body, html {
    margin: 0;
    padding: 0;
}
header {
    background-color: #eee;
}
ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    border-bottom: 5px solid #ccc;
}
ul>li {
    display: inline-block;
    padding: 0 15px 0 15px;
    margin-left: -4px;
}
ul>li:first-child {
    margin-left: 0;
}
ul>li>a {
    display: block;
    color: #333;
    text-decoration: none;
    padding: 5px 0 5px 0;
}
ul>li.active {
    border-bottom: 5px solid #555;
    margin-bottom: -5px
}
<header>
    <nav>
        <ul>
            <li class="active"><a href="#" title="Home">Home</a>
            </li>
            <li><a href="#" title="About">About</a>
            </li>
            <li><a href="#" title="Contact">Contact</a>
            </li>
        </ul>
    </nav>
</header>

Upvotes: 2

Related Questions