javascript - Submenu - Fade in and Fade out submenu in menu bar -

i want create menu bar in on hover, related menu should appears beside item, , when mouse pointer goes out, should disappears.

for example when place mouse pointer on username @ top of page, you'll see menu contains activity, privileges, logout etc.

i want implement such menu.

toggling visibility(or changing display) attribute of menu element(such div) obvious.

but problem is how detect mouse pointer hovering on menu, , should not disappear till mouse pointer goes out!

i don't want use jquery.

pure css method

fiddle: http://jsfiddle.net/gvee/jrfse/

html

<ul>     <li>item 1         <ul>             <li>subitem 1</li>             <li>subitem 2</li>         </ul>     </li>     <li>item2</li>     <li>item 3         <ul>             <li>subitem 1</li>         </ul>     </li> </ul> 

css

ul {     list-style-type: none; }  ul li {     padding: 5px;     margin: 3px;     border: 1px solid black; }  ul li:hover {     background-color: lime; }  li ul {     display: none; }  li:hover ul {     display: block; }  li ul li:hover {     background-color: red; } 

note: there's still styling left do, merely illustrate principle.