:hover to stay active when cursor over dropdown

Question

I'm having some trouble with a dropdown menu. I would like, on hover, the sub menu to appear. When the users mouse exits the parent and moves to the list, I need the list to stay, allowing the user to browse such.

How could this be achieved?

I'm using the following css to drop the menu down when the parents hovered:

#ddOne:hover ~ ul {
    background-color: red;
    display: block !important;
}

I have made a fiddle of my issue. Thanks!

The full code:

  #mainMenuBar li ul li { width: 100%; } #mainMenuBar { list-style: outside none none; margin-top: 30px; display: none; } #mainMenuBar li { width: 90%; margin: 5px auto; border: 0px solid #F00; min-height: 40px; text-align: center; vertical-align: middle; } #mainMenuBar ul li { float: left; min-height: 1px; vertical-align: middle; position: relative; } #mainMenuBar li ul, #mainMenuBar li ul li ul { display: none; } #mainMenuBar li ul li ul { position: relative; display: none; width: 100%; height: auto; } @media screen and (min-width: 641px) { #mainMenuBar { display: block; color: white; } #ddOne:hover ~ ul, #mainMenuBar li ul:hover ~ ul { background-color: red; display: block !important; } #mainMenuBar li { width: auto; float: left; padding: 0px 1.4%; min-height: 0; } #mainMenuBar li a { /* margin-bottom: -25px; height: 50px; */ } #mainMenuBar li ul { position: absolute; width: 150px; background: none repeat scroll 0% 0% #333; height: 100px; padding-top: 10px; border-top: 1px solid red; margin-top: 6px; } #mainMenuBar { display: block; } #mainMenuBar li ul li { width: 100%; list-style: none; } #mainMenuBar li ul li ul { margin-left: 148px; position: absolute; top: 0; } } 

 <ul id="mainMenuBar"> <li><a href="#">Home</a> </li> <li> <a href="#" class="dropdown" id="ddOne">Cigarette Types +</a> <ul> <li> <a href="#" class="dropdown" id="subTwo">A - D +</a> <ul> <li>Argentinean Sylvestris</li> <li>Aztec Rustica</li> <li>Banana Leaf</li> <li>Big Gem</li> <li>Blue Tree Glaucia</li> <li>Burley Oridinal</li> <li>Burley Variation</li> <li>Catterton</li> <li>Cherry Red</li> <li>Connecticut Broard Leaf</li> <li>Cuban Havana 142</li> <li>Del Gold</li> </ul> <a href="#" class="dropdown" id="subTwo">E - O +</a> <a href="#" class="dropdown" id="subTwo">P - T +</a> <a href="#" class="dropdown" id="subTwo">U - Z +</a> <ul> <li>Third Level</li> <li>Third Level</li> <li>Sub Three</li> </ul> </li> </ul> </li> <li><a href="#">Cigar Types</a> </li> <li class="hasSub"><a href="#" class="dropdown">Pipe Types+</a> <ul> <li>sub 2</li> <li> <a href="#" class="dropdown" id="subTwo">sub1.1+</a> <ul> <li>testt</li> </ul> </li> </ul> </li> <li><a href="#">Pelleted Seeds</a> </li> <li><a href="#">Strong Types</a> </li> </ul> 

Answer 1

#ddOne:hover ~ ul, #ddOne ~ ul:hover {
    background-color: red;
    display: block !important;
}

Cannot open your fiddle (company network) but this should do it :)

Answer 2

Based on your structure you can use this:

#mainMenuBar ul {
    display:none;
}
#mainMenuBar li:hover > ul {
    display:block;
}

And you can't separate with margin the submenu since it will break the zone of the hover:

#mainMenuBar li ul {
        position: absolute;
        width: 150px;
        background: none repeat scroll 0% 0% #333;
        height: 100px;
        padding-top: 10px;
        border-top: 1px solid red;
        /*margin-top: 6px; REMOVE THIS*/
}

UpdateFiddle

Answer 3

Your issue is the gap between href element and second menu level.

Change #ddOne:hover{...} rule with this:

#ddOne {
    padding: 0 0 10px 0;
    border: 1px solid red;
}

#ddOne:hover ~ ul, #ddOne ~ ul:hover {
    background-color: red;
    display: block !important;
}

See it in action:

http://jsfiddle.net/uLbfqrpf/16/

I would not recommend to base menu on :hover because that would make site unusable on touch screen devices.