Дополнительное заполнение на границе

Question

Я получаю дополнительное дополнение, добавленное на моей нижней границе при наведении. Есть ли способ избавиться от дополнительного заполнения?

Я пробовал:

#nav a:hover, #nav a:focus { 
    border-bottom: solid 3px #000; 
    padding: 0; 
} 

но это делает пункт меню перемещения, потому что оригинальная обивка удаляется от него.

HTML:

<nav id="nav"> 
    <div class="menu-main-container"> 
    <ul id="menu-main" class="menu"> 
     <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-33 current_page_item menu-item-47"><a href="/">Home</a></li> 
     <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43"><a href="/contact/">Contact</a></li> 
    </ul> 
    </div> 
</nav> 

CSS:

#nav { 
    max-height: 100px; 
    overflow: hidden; 
} 
#nav ul { 
    margin: 0 0 30px 0; 
    text-align: center; 
} 
#nav ul { 
    margin: 0 0 30px 0; 
    text-align: center; 
} 
#nav li { 
    font: 400 18px/13px 'Open Sans', sans-serif; 
    display: inline-block; 
    text-transform: uppercase; 
} 
#nav a { 
    padding: 0 16px; 
    color: #343434; 
    font-weight: bold; 
} 
#nav a:hover, #nav a:focus { 
    border-bottom: solid 3px #000; 
} 

JSFiddle

Answer 1

Это происходит потому, что граница добавляется через отступа слой в css box model Это идет как Первая и сокровенной является обивка , затем границы, а затем поля. Чтобы это исправить, нужно сделать следующее:

Вместо этого:

#nav li { 
    font: 400 18px/13px 'Open Sans', sans-serif; 
    display: inline-block; 
    text-transform: uppercase; 
} 
#nav a { 
    padding: 0 16px; 
    color: #343434; 
    font-weight: bold; 
} 

это сделать:

#nav li { 
    padding: 0 16px; /* added here*/ 
    font: 400 18px/13px 'Open Sans', sans-serif; 
    display: inline-block; 
    text-transform: uppercase; 
} 
#nav a { 
    /*padding: 0 16px;*/ /* removed from here*/ 
    color: #343434; 
    font-weight: bold; 
} 

JSFiddle