Я хочу подчеркнуть мое меню навигации, но проблема в том, что мне нужно, чтобы он был толще, поэтому я использую нижнюю границу, чтобы я мог установить ширину в 6 пикселей.
Я могу понять, как заставить границу приблизиться к тексту. Кажется, что разрыв между текстом и нижней границей в настоящий момент составляет 10px, и я не хочу иметь его.
Я попытался позиционировать другой div и поместить его относительно каждого {li} с {bottom: 10px}, но я не могу заставить его работать.
Вот что у меня такое
КОД
<div id="menu">
<ul>
<li><a href="#home">home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
CSS
#menu {
position: fixed;
left: 25%;
clear: both;
float: left;
font-size: 80px;
z-index: 500;
filter: alpha(opacity=75);
opacity: .75;
}
#menu ul{
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
line-height: 90px;
}
#menu ul li{
text-decoration: none;
list-style-type: none;
margin: 0;
}
#menu ul li a{
border-bottom: 6px solid #000;
text-decoration: none;
list-style-type: none;
color: #000;
}
#menu ul li a:hover{
}