Whenever I hover over the main menu ("for example: Menu 2"), I am able to see the dropdown list underneath.
However, when I try to move my cursor to submenu1, it does not display and I cannot select it either.
Below is a snippet of my code for reference:
<style type="text/css">
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
color: #fff;
background: #666;
padding: 5px;
display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
width: 100px;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
</style>
<div id="menu" align="left">
<ul id="menu">
<li>
<a href='<%=request.getContextPath()%>/auth/gs.page'>Menu1</a>
</li>
<li><a>Menu2</a>
<ul class="sub-menu">
<li>
<a href='<%=request.getContextPath()%>/auth/view.page'>submenu1</a>
</li>
</ul>
</li>
</div>
I would appreciate any suggestions or solutions to fix this issue.