Making link stay on page until curser not hovering over them - html

Question

I am currently making a horizontal drop-down menu, I have it working so that when you hover over an image, subsequent images appear below it, then when you move away from the main link; they disappear.
But the problem is, is I want it so that when you hover over one of the subsequent links, the links remain until you move away from them, at the moment they are disappearing when you move over the link.
HTML:
<nav id="navigation">
<ul style="list-style:none">
<li class="fixtures"><img id="sweets-button" src="images/Sweets_Button.png"></li>
<ul style="list-style:none" class="hidden">
<li ><img src="images/Sweets_Button-Dropdown.png"></li>
<li><img src="images/Sweets_Button-Dropdown.png"></li>
</ul>
</nav>
CSS:
#navigation ul.fixtures:hover{ /* Makes anything with the class 'hidden' appear when hover over anything with 'fixtures class' */
color: #000;
margin-top:1px;
-webkit-transition-duration: 0.4s;
cursor: pointer;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
box-shadow: 0px 0px 20px rgba(0,235,255,0.8);
-webkit-box-shadow: 0px 0px 20px rgba(255,102,51,0.8);
background: rgba(255,102,51,0.8);
opacity: 50%;
}
ul.hidden{
display: none;
position:absolute;
margin-top:-90px;
margin-left:110px;
}
li.fixtures:hover + ul.hidden{ /* Makes anything with the class 'hidden' appear when hover over anything with 'fixtures class' */
display: block;
position:absolute;
margin-top:-20px;
margin-left:72px;
}
Thanks for any help!
Here is some jsfiddle, which may help you visualize it:
http://jsfiddle.net/QkY83/

Answer 1

Básically, You have to add the whole submenu (the ul element) inside of the parent menu item (li.fixtures). Here is a minimal example (updated in the jsfiddle you provided http://jsfiddle.net/QkY83/3/):
The HTML:
<nav id="navigation">
<ul style="list-style:none">
<li class="fixtures"><a> This is main link </a>
<ul style="list-style:none" class="hidden">
<li><a> This is first sub-link </a></li>
<li><a> This is Second sub-link </a></li>
</ul>
</li>
</ul>
</nav>
The CSS:
ul.hidden {
display: none;
position:absolute;
}
li.fixtures:hover ul.hidden {
/* Applied to the child ul */
display: block;
margin-top:-20px;
margin-left:72px;
}