html - Level 2 submenu always visible -

i have spent whole day looking through various examples , still can't figure out way of setting 2 level submenu invisible. got template of net , trying customise it.

here navigation bit css file (i know looks ugly ): )

#navigation { height: 35px; line-height: 35px; float: right; position: relative; z-index: 20; } #navigation ul { list-style: none; list-style-position: outside; font-size: 13px; text-shadow: rgba(255,255,255,0.5) 0px 1px 1px; } #navigation ul li { float: left; position: relative; padding-right: 2px; background: url(images/navigation-border.png) no-repeat right 0; } #navigation ul > li.last { background: transparent; width: auto; float: left; padding-right: 0; } #navigation ul > li.last { border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; -webkit-border-radius: 0px 5px 5px 0px; -o-border-radius: 0px 5px 5px 0px; border-right: 1px solid #d7e1e8 !important; } #navigation ul > li.first { border-radius: 5px 0px 0px 5px ; -moz-border-radius: 5px 0px 0px 5px ; -webkit-border-radius: 5px 0px 0px 5px ; -o-border-radius: 5px 0px 0px 5px; border-left: 1px solid #d7e1e8 !important; } #navigation ul li { color: #324957; float: left; padding: 0 18px; border: 1px solid #d7e1e8; border-left: 0; border-right: 0; background: url(images/navigation.png) repeat 0 0;  } #navigation ul li a:hover, #navigation ul li.active { background: url(images/navigation-a.png) repeat 0 0; color: #3995d6; text-decoration: none; }  #navigation ul li span { background: url(images/navigation-arr.png) no-repeat right 0; width: 10px; height: 6px; float: right; padding-left: 3px; margin-top: 14px; }  #navigation ul li ul { display: none; float: none; line-height: 28px;  position: absolute; top: 35px; left: 0; width: 100%; background: #e1efff; border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; -webkit-border-radius: 0px 0px 5px 5px; -o-border-radius: 0px 0px 5px 5px; } #navigation ul li:hover ul { visibility: visible; }  #navigation ul li ul li { display: block; float: none; padding: 0; background: transparent; }  #navigation ul li ul li { float: none; display: block !important; padding: 0 18px; } #navigation ul li ul li a:hover { float: none; display: block; background: transparent; background-color: #bdd7f4; } #navigation ul li.last ul li {  padding: 0 18px !important;  float: none; display: block;  border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px;} #navigation ul li ul li.last { float: none; display: block; } #navigation ul li ul li.last { border-radius: 0px 0px  5px 5px; -moz-border-radius: 0px 0px  5px 5px; -webkit-border-radius: 0px 0px  5px 5px; -o-border-radius: 0px 0px  5px 5px; }  #navigation ul li ul li.first { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px;} #navigation ul li.first ul li { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px;} 

and here how trying write sub-menu

<nav id="navigation">                             <ul>                             <li><a href="#">individual patient analysis</a></li>                             <li>                             <a href="#">multiple patient analysis<span></span></a>                                 <ul>                                     <li><a href="#">gender</a></li>                                     <li><a href="#">age</a></li>                                      <li><a href="#">field number</a></li>                                     <li><a href="#">occupation</a></li>                                     <li><a href="#">eye<span></span></a>                                 <ul>                                     <li><a href="#">left</a></li>                                     <li><a href="#">right</a></li>                                 </ul>                                 </li>                                 </ul>                             </li>                               <li><a href="#">upload file</a></li>                          </ul>                     </nav> 

the problem here level 2 submenu eye visible, without hovering on 'eye' tab , cannot seem fix it. want "left" , "right" submenu appear when 1 hovers on "eye" tab. , problem found in fiddle menu hides on hovering on left or right sub menu. how can fixed ?

any appreciated !

you hiding dropdown menu using display:none , try use visibility:visible on hover of li item doesn't shows dropdown menu @ all.

change

#navigation ul li:hover ul {     visibility: visible;  } 

to below display immediate child ul items of parent li item.

#navigation li:hover > ul {    display:block;  } 

demo