使主動力控的下邊框上的菜單的底部邊框的CSS

Question

這裏是我的小提琴：http://jsfiddle.net/gaoshun92/58kvpdpv

你好，請幫我的想法主動菜單有導航下邊框底部邊框覆蓋。我嘗試過，但總是在線下的活動元素，而不是覆蓋。任何建議是一個很大的幫助。

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 
} 

Answer 1

通過在您的底部（-5px）加入負利潤率，因爲你的邊界爲5px厚，你會解決這個問題：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>