I am currently working on creating a CSS navbar dropdown, but I am encountering some issues. I am not very experienced with CSS, so any assistance would be greatly appreciated. The text within the "Products" box is not changing color like it should, and you can only click on the actual text of the products box. Additionally, the dropdown is not aligned horizontally with the products box.
Here's a link to the jsfiddle: https://jsfiddle.net/epp0zmd6/
HTML Code:
<div class="navbar">
<ul>
<a href="#"><li class="active">Homepage</li></a>
<a href="#"><li>Contact Us</li></a>
<a href="#"><li>Web Learning Platform</li></a>
<a href="#"><li><a href="#">Products</a>
<ul>
<a href="#"><li>Requirement Extraction & Analysis</li></a>
<a href="#"><li>Early Deduction Modelling & Analysis</li></a>
</ul>
</li></a>
</ul>
</div>
CSS Code:
.navbar ul {
display: inline-table;
vertical-align: middle;
list-style: none;
position: relative;
}
.navbar ul:after {
content: "";
clear: both;
display: block;
}
.navbar ul ul {
display: none;
border-radius: 0;
padding: 0;
position: absolute;
top: 100%;
}
.navbar ul ul li {
float: none;
position: relative;
}
.navbar ul li:hover > ul {
display: block;
}
.navbar ul li {
background-color: #0A6CA3;
display: inline-block;
vertical-align: middle;
font-family: SinkinSans;
font-size: 20px;
padding-top: 27px;
padding-bottom: 21px;
padding-left: 10px;
padding-right: 10px;
color: #FFFFFF;
transition: all 0.8s;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
-o-transition: all 0.8s;
margin-left: -2px;
margin-right: -2px;
float: left;
}
.navbar ul li:hover {
background-color: #FFFFFF;
color: #00A3FF;
}
.navbar ul a {
text-decoration: none;
}
.navbar ul a:visited {
color: #FFFFFF;
}
.navbar ul a:hover {
color: #00A3FF;
}
.navbar ul .active {
background-color: #FFFFFF;
color: #00A3FF;
}