I am currently working on a navigation bar that changes the background color of the links when hovered. However, I encountered an issue where the dropdown menu in the navigation bar does not cover the entire area.
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
ul li {
display: inline-block;
position: relative;
background-color: black;
}
ul li a {
display: block;
color: white;
text-decoration: none;
text-align: center;
margin: -left:0;
padding: 15px 25px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
ul li a:hover {
background-color: #333;
}
ul li ul#dropdowncontent {
display: inline-block;
position: absolute;
text-align: center;
min-width: 100%;
font-size: 70%;
z-index: 999;
width: 90px;
}<ul>
<li><a href="#">Products</a>
<ul id="dropdowncontent">
<li><a href="#">Motherboards</a></li>
<li><a href="#">Processors</a></li>
<li><a href="#">Hard Drives</a></li>
<li><a href="#">Graphics Cards</a></li>
</ul>
</li>
<li><a href="#">Stores</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQs</a></li>
</ul>You can view the code on Jsfiddle at this link: https://jsfiddle.net/fdvcmnx6/