Can't hover the child menu while creating css menu -


i trying create simple css menu following structure:

<section id="navigation-bar" class="container">     <nav class="pull-left">         <ul class="multicolumnmenu">             <li>                 <a href="#">menu 1</a>                 <div class="column-menu">                     <ul>                         <li> sub menu 1 </li>                         <li> sub menu 2 </li>                         <li> sub menu 3 </li>                         <li> sub menu 4 </li>                         <li> sub menu 5 </li>                     </ul>                 </div>                                       </li>         ...         </ul>     </nav> </section> 

i trigger menu css

.multicolumnmenu > li:hover  .column-menu{     display: block; } 

the menu shows can't hover on it. when hover on it, goes away.

demo

it's margin-top inside .column-menu causing disappear before can hover on (due physical gap between elements, :hover state lost) - remove , works fine.

jsfiddle here.


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -