CSS Navigation Gap

Question

Так в моем меню бара я создал, есть небольшой зазор в нижней части, которая отображается на этой картинке:

Я действительно хочу, чтобы удалить его, и я не знаю, что вызывает его появляются только на дне, никаких других ребер. Вот мой код:

#nav ul { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t list-style: none; 
 
\t overflow: hidden; 
 
\t border: 1px solid #e7e7e7; 
 
\t background-color: #f3f3f3; 
 
} 
 

 
#nav li { 
 
\t float: left; 
 
} 
 

 
#nav li a { 
 
\t display: block; 
 
\t color: #666; 
 
\t text-align: center; 
 
\t padding: 14px 16px; 
 
\t text-decoration: none; 
 
\t font-family: 'Economica', sans-serif; 
 
} 
 

 
#nav li a:hover:not(.active) { 
 
\t background-color: #ddd; 
 
} 
 

 
#nav li a.active { 
 
\t color: white; 
 
\t background-color: #4CAF50; 
 
}

<div id="nav"> \t 
 
\t <ul> 
 
\t \t <li><a href="#">User Management</a></li> 
 
\t \t <li><a href="#">Project Management</a></li> 
 
\t \t <li><a href="#">Site Management</a></li> 
 
\t \t <ul style="float:right;list-style-type:none;"> 
 
\t \t \t <li><a href="#">Logout</a></li> 
 
\t \t </ul> 
 
\t </ul> 
 
</div>

https://jsfiddle.net/vrh4hpa1/

Я не видел ни одного padding, который будет единственной причиной его появления на дне, может быть, я слеп.

Answer 1

Во-первых, ваш html недействителен, у вас есть ul непосредственно внутри другого ul. Попробуйте следующее:

HTML:

<div id="nav"> 
    <ul> 
    <li><a href="#">User Management</a></li> 
    <li><a href="#">Project Management</a></li> 
    <li><a href="#">Site Management</a></li> 
    <li><a href="#">Logout</a></li> 
    </ul> 
</div> 

CSS:

#nav li:last-child {float:right} 

JSFiddle

Answer 2

#nav li a { 
    display: block; 
    color: #666; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    font-family: 'Economica', sans-serif; 
} 

просто удалите дисплей: блок;

Answer 3

Это из-за вложенным UL элемент для "выхода из системы" якорь ссылки. Я обновил код CSS в вашем jsfiddle:

https://jsfiddle.net/vrh4hpa1/4/

Я просто добавил специальное правило CSS, чтобы уменьшить верхние/нижние отступы по 1px каждого.

//what you have already 
#nav li a { 
    display: block; 
    color: #666; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    font-family: 'Economica', sans-serif; 
} 

//additional rule for the nested ul element 
#nav ul ul li a { 
    padding: 13px 16px; 
}