Css dropdown navbar issue - html

Question

I am making a css navbar dropdown, and am having some issues. I'm not the most experienced person in css, so a little help would be appreciated.
The products text doesn't change color, like on the other ones and you can only click on the text of the products box.
Also the dropdown is not horizontally aligned with the products box.
Here's a link to jsfiddle:
https://jsfiddle.net/epp0zmd6/
Code(HTML):
<div class="navbar">
<ul>
<li class="active">Homepage</li>
<li>Contact Us</li>
<li>Web Learning Platform</li>
<li><a href="#">Products
<ul>
<li>Requirement Extraction & Analysis</li>
<li>Early Deduction Modelling & Analysis</li>
</ul>
</li></a>
</ul>
</div>
Code(CSS):
.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;
}

Answer 1

the first mistake is, always put anchor tag inside the li tag
and second mistake is for the dropdown use ul > li > a and than, start child ul before closing li and after closing the anchor tag
and for proper clicking i have put padding on anchor tag with display inline block property.
i have updated fiddle i think you want something like this try this, hope the code will help you.
.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 li:hover > ul {
display: block;
}
.navbar ul li {
display: inline-block;
margin-left: -2px;
margin-right: -2px;
float: left;
}
.navbar ul li >a{
padding-top: 27px;
padding-bottom: 21px;
padding-left: 10px;
padding-right: 10px;
display:inline-block;
color:#fff;
text-decoration: none;
background-color: #0A6CA3;vertical-align: middle;
font-family: SinkinSans;
font-size: 20px;
transition: all 0.8s;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
-o-transition: all 0.8s;
}
.navbar ul li:hover >a,
.navbar ul li.active >a{
background-color: #FFFFFF;
text-decoration: none;
color: #00A3FF;
}
<div class="navbar">
<ul>
<li class="active">Homepage</li>
<li>Contact Us</li>
<li>Web Learning Platform</li>
<li>Products
<ul>
<li>Requirement Extraction & Analysis</li>
<li>Early Deduction Modelling & Analysis</li>
</ul>
</li>
</ul>
</div>

Answer 2

You have 2 links on your "Products" entry, that's too much:
<li><a href="#">Products
etc.
Just remove one.
Concerning the position of the dropdown: add
.navbar ul li { left: -8px; }