My goal is to create a horizontal navigation bar that features menu options with headings and icons below them. Upon hovering over each option, the block's background color should change and slightly increase in size. I initially used percentages for sizing everything in the navigation bar, which was functioning properly until I needed to vertically align the menu options.
To achieve vertical alignment, I switched the display property from inline-block to table/table-cell. While this resolved the alignment issue, it created a thin space underneath the list and caused each list item to no longer occupy 100% of the navigation height, thus disrupting the hover effect on the background color.
You can view a screenshot illustrating the navigation bar here. The pink background highlights the issue, but ideally, there would only be a green background without any color, and the blue box hovering over the "learn" button should extend to the edges of the navigation bar as it did before the display change.
Another screenshot showing how it looks when the li display is set to inline-block can be seen here. This image represents what I aim for, except for the lack of vertical alignment.
This simplified version depicts my HTML structure:
<nav class="nav_bar">
<span id="logo">
<a href="home.html"><img src="images/nav_bar/logo_img.png"></a>
<a href="home.html"><img src="images/nav_bar/logo_text.png"></a>
</span>
<ul class="nav_menu">
<li id="learn"><a href="learn.html">LEARN<br><img src="images/nav_bar/learn.png"></a></li
><li id="watch"><a href="watch.html">WATCH<br><img src="images/nav_bar/watch.png"></a></li
><li id="share"><a href="share.html">SHARE<br><img src="images/nav_bar/share.png"></a></li
><li id="more"><a href="more.html">MORE<br><img src="images/nav_bar/more.png"></a></li
><li id="active"><a href="home.html">HOME<br><img src="images/nav_bar/home.png"></a></li>
</ul>
</nav>Here are the relevant CSS styles:
.nav_menu {
display: table;
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
height: 100%;
width: 35%;
list-style-type: none;
}
.nav_menu img {
width: 70%;
}
.nav_menu li {
display: table-cell;
height: 100%;
width: 20%;
vertical-align: middle;
overflow: hidden;
}
.nav_menu a {
display: table-cell;
height: 100%;
width: 100%;
text-align: center;
font-size: 1.5vw;
text-decoration: none;
}
.nav_menu a:hover {
transform: scale(1.1);
}
#learn a:hover {
background-color: #69D1ED;
}
I briefly attempted using icons as list background images, but encountered difficulties positioning them beneath the text.
Since this is an assignment, I am limited to using only HTML and CSS. Additionally, the solution must be compatible with Chrome, Safari, Firefox, Internet Explorer, and Opera browsers.