I'm currently working on a drop-down menu and everything seems to be functioning properly. However, when I hide my drop-down block, it doesn't reappear on hover. Can someone help me identify the issue here?
HTML-:
<div id="nav_wrapper">
<ul>
<li><a href="#">maths</a>
<ul class="one">
<li><a href="#">real number</a></li>
</ul>
</li>
<li><a href="#">english</a></li>
<li><a href="#">hindi</a></li>
<li><a href="#">french</a></li>
<li><a href="#">german</a></li>
</ul>
</div>
CSS-:
#nav_wrapper {
position: relative;
top: 20px;
left: 100px;
}
#nav_wrapper ul {
list-style-type: none;
}
#nav_wrapper ul li {
outline: 1px solid white;
width: 160px;
text-align: center;
position: relative;
float: left;
background: black;
}
#nav_wrapper ul li a {
text-decoration: none;
display: inline-block;
height: 25px;
width: 160px;
padding-top: 7px;
color: #DAA520;
}
#nav_wrapper ul ul.one {
display: none;
}
#nav_wrapper ul li a:hover {
color: wheat;
}
#nav_wrapper ul li a:hover > ul.one {
display: block;
}
Currently, when hovering over MATHS, the real number drop-down block is not appearing.