I'm specifically looking for a solution using CSS only.
I have a navigation bar with an unordered list containing list items. My question is how to underline these list items with a border-bottom. The additional requirement is that the navigation bar has a fixed height and I want the unordered list to be centered both horizontally and vertically.
Here's my current setup: JSFiddle
HTML:
<nav>
<ul id="menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</nav>
CSS:
nav {
height: 120px;
width: 90%;
margin: 0 auto;
display: table;
}
#menu {
display: table-cell;
vertical-align: middle;
list-style-type: none;
height: 20px;
padding: 0;
}
#menu > li {
font-weight: bold;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
float: left;
width: inherit;
padding: 0 25px 0 25px;
cursor: pointer;
}
#menu > li > a {
color: #000;
text-decoration: none;
}
#menu > li:hover {
border-bottom: 3px solid #000;
}
#menu li a:hover {
text-decoration: none;
}
I've tried several approaches, but haven't had success yet. Here are some methods I've attempted:
- Using :after to create a div after each list item, but it was difficult to control the width of each one;
- Adding margin-top when hovering over a list item to all other list items using :not (e.g. #main > li:hover(:not)), which didn't work in this context;
- Adding margin-top when hovering over the ul#main (which takes up the full height of the nav);
The main issue I'm facing is that the list items jump when hovered over. If you know of another method for vertically aligning the unordered list or adding margin-top to the ul, I'd appreciate any suggestions as I've exhausted my options.