html - Issue in, when hover on a link displays my list but not able to click on it -


i new css , need here... have example of nested list view...what want is, when hover on link, inner list should visible.....i done css problem when go click on elements of inner list, gets again hide....see http://jsfiddle.net/t7mdf/ how keep visible inner list till pointer on inner list...

so missing in css style...please advice me.. code follows..

<ul class="main-menu"> <li>     <a>first list</a>     <ul class="sub-menu">         <li>1</li>         <li>2</li>         <li>3</li>     </ul> </li> <li>     <a>second list</a>     <ul class="sub-menu">         <li>4</li>         <li>5</li>         <li>6</li>     </ul> </li> <li>     <a>third list</a>     <ul class="sub-menu">         <li>7</li>         <li>8</li>         <li>9</li>     </ul> </li> 

css .main-menu{list-style:none;} .sub-menu{display:none;} .main-menu a:hover + .sub-menu{display:block;}

add css chuck of code:

.sub-menu:hover{display:block;} 

Comments

Popular posts from this blog

assembly - 8086 TASM: Illegal Indexing Mode -

Java, LWJGL, OpenGL 1.1, decoding BufferedImage to Bytebuffer and binding to OpenGL across classes -

javascript - addthis share facebook and google+ url -