I have set up a side menu on my website. I am trying to make it so that when the user hovers over the Manage Contracts button, a sub menu will appear. To achieve this, I have created two ul elements - one for the primary menu and one for the sub menu. The reason for separating them is to prevent the sub menu from inheriting styles from the primary menu. However, I am facing an issue with getting the sub menu to appear when the mouse hovers over the Manage Contract button. Any suggestions?
Here is the HTML code:
<div id="navbar-side">
<div id="profile-image">
</div>
<div id="menu-search">
<input type="text" name="search" id="search" placeholder="Search..." />
</div>
<ul id="side-menu">
<li><a href="#" title="Dashboard">Dashboard</a></li>
<li><a href="#" title="Manage Contracts" id="contracts">Manage Contracts</a></li>
<li><a href="#" title="Manage Duplicates">Manage Duplicates</a></li>
<li><a href="#" title="PPM Manager">PPM Manager</a></li>
<li><a href="#" title="Service User Search">Service User Search</a></li>
<li><a href="#" title="My Subscriptions">My Subscriptions</a></li>
<li><a href="#" title="Help Centre">Help Centre</a></li>
</ul>
<ul id="contracts-menu">
<li><a href="#">General</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Communication</a></li>
<li><a href="#">Contract Details</a></li>
<li><a href="#">Retail Setup</a></li>
</ul>
</div>
And here is the CSS code:
#side-menu
{
width:100%;
position:relative;
}
#side-menu li
{
display:block;
border-bottom:solid 1px black;
}
#side-menu a
{
display:block;
border-top:solid 1px white;
padding:18px 0;
}
#side-menu a:hover
{
background-color:Silver;
}
#contracts-menu
{
display:none;
width:200px;
height:300px;
background-color:Aqua;
margin-left:228px;
position:absolute;
top:87px;
}
#contracts-menu li
{
display:block;
}
#contracts-menu a
{
display:block;
}
a#contracts:hover + #navbar-side ul#contracts-menu
{
display:block;
}