div not appearing when mouse is over link

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><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>

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

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><a href="#" title="Dashboard">Dashboard</a></li>
        <li id="contracts">
            <a href="#" title="Manage Contracts">Manage Contracts</a>
            <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>
        </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>
</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/

Answer 2

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><a href="#" title="Manage Contracts" id="contracts">Manage Contracts</a>
    <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> 
 </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