I am having trouble making the hover effect in my navigation bar work properly. Even though I can separately make the 'display: none' and hover effects work, they do not function together. I am unsure of what mistake I might be making.
Below is the HTML code:
<nav>
<ul>
<li><a href="#"><img class="mainbar"src="images/logov6v2.png" width="175" height="150" padding="0" text-align="center" vertical-align="text-top"></a>
<li id="menudrop" class="rightbar"><a href="#">Menu</a></li>
<ul data-toggle="">
<li><a href="#">Account Settings</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
</ul>
</nav>
This is the CSS code:
#menudrop.rightbar ul li a {
color: red;
display: block;
text-decoration: none;
}
nav ul li ul {
display: none ;
background: #5f6975;
position: relative;
top:100%;
}
nav ul li ul:hover li {
display: block;
}