I am having trouble creating a menu that has the same style as shown in this image: .
Unfortunately, my menu ends up looking like this instead: .
Can someone please help me fix this issue?
Here is the HTML code I am working with:
<header>
<div id="logo">
<h1>TecQ</h1>
</div>
<nav class="prime-menu">
<ul>
<li><a class="on" href="index.html"><img src="img/icons/home.png">Home</a></li>
<li><a class="on" href="index.html"><img src="img/icons/home.png"></a></li>
<li><a class="on" href="index.html"><img src="img/icons/home.png"></a></li>
<li><a class="on" href="index.html"><img src="img/icons/home.png"></a></li>
</ul>
</nav>
</header>
And here is the CSS code associated with the menu:
.prime-menu ul {
list-style: none;
}
.prime-menu ul li {
margin-top: 2px;
display: inline-block;
}
.prime-menu ul li a{
width: 140px;
height: 140px;
display: inline-block;
font-size: 20px;
color: #FFF;
text-align: center;
text-decoration: none;
background: #15161c;
font-size: 12px;
line-height: 140px;
}
.prime-menu ul li a img{
}
.prime-menu ul li a:hover {
background: #1c1d25;
font-weight: 400;
}