div not appearing when mouse is over link - html

Question

I currently have a side menu. I'd like it if the user hovers over the Manage Contracts button the sub menu then appears. I've created two ul's - the primary menu and a sub menu ul. The reason being because I don't want the sub menu inheriting the styles from the primary menu if that makes sense? However at the moment I can't get the the menu to appear when the mouse is over the Manage Contract button. Any ideas?
the html:
<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>Dashboard</li>
<li>Manage Contracts</li>
<li>Manage Duplicates</li>
<li>PPM Manager</li>
<li>Service User Search</li>
<li>My Subscriptions</li>
<li>Help Centre</li>
</ul>
<ul id="contracts-menu">
<li>General</li>
<li>Settings</li>
<li>Communication</li>
<li>Contract Details</li>
<li>Retail Setup</li>
</ul>
</div>
the css:
#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;
}

Answer 1

That's because a#contracts and div#navbar-side are not siblings!
You can't use + and/or ~ selectors on non-sibling elements.
On the other hand, there's no parent selector in CSS (yet).
You could use JavaScript to achieve this or change your markup structure, as follows:
<li>Manage Contracts
<ul id="contracts-menu">
<li>General</li>
<li>Settings</li>
<li>Communication</li>
<li>Contract Details</li>
<li>Retail Setup</li>
</ul>
</li>
CSS:
a#contracts:hover + ul#contracts-menu {
display:block;
}
JSBin Demo.
Update
But in this case, There's no need to set id attriute on each link/item.
You could nest the sub-menus in each list item and display them as follows:
#side-menu li:hover > ul { /* Select the ul children inside each list-item */
display:block;
}
JSBin Demo #2

Answer 2

If you don't want to use javascript, you could put the ul#contracts-menu inside the list-item that contains the #contracts anchor:
<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>Dashboard</li>
<li id="contracts">
Manage Contracts
<ul id="contracts-menu">
<li>General</li>
<li>Settings</li>
<li>Communication</li>
<li>Contract Details</li>
<li>Retail Setup</li>
</ul>
</li>
<li>Manage Duplicates</li>
<li>PPM Manager</li>
<li>Service User Search</li>
<li>My Subscriptions</li>
<li>Help Centre</li>
</ul>
</div>
Add the id to the list item (instead of the anchor) and then add:
#side-menu li.contracts:hover #contracts-menu { display:block; }
See: http://jsfiddle.net/FmR3f/