I'm currently experiencing an issue with the Drop-Down Navigation menu that I created using HTML and CSS. When I tried to add padding between the list of UL elements, I noticed that the padding was inconsistent across the elements. For example, the student box has a 1px gap on all sides (visible when zoomed in), while the other items have varying amounts of padding.
Below, I've included snippets of both the CSS and HTML code:
* {
margin: 0;
padding: 0;
}
body {
background: #34495e;
}
nav {
width: 100%;
height: 60px;
background-color: rgba(49, 45, 45, 0.8);
text-align: center;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li a {
display: block;
font-family: sans-serif;
color: #222;
font-size: 20px;
padding: 18px 14px;
text-decoration: none;
}
nav ul li ul {
display: block;
position: absolute;
background-color: rgba(49, 45, 45, 0.8);
padding: 1px;
}
nav ul li ul li a {
padding: 8px 32px;
}
nav ul li a:hover {
background-color: #2ecc71;
}
nav ul li ul li a:hover {
background-color: #2ecc71;
}<html>
<head>
<title>Dropdown Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Registration</a>
<ul>
<li><a href="#">Student</a></li>
<li><a href="#">Bus</a></li>
<li><a href="#">Route</a></li>
<li><a href="#">Driver</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
</ul>
</nav>
</body>
</html>If anyone could lend a hand, it would be greatly appreciated.