Level 2 submenu always visible

Question

I have spent almost a whole day looking through various examples and still can't figure out a way of setting the 2 level submenu invisible. I got this template of the net and trying to customise it.

Here is the navigation bit from css file (I know it 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 a { 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 a { 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 a { 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 a { background: url(images/navigation-a.png) repeat 0 0; color: #3995d6; text-decoration: none; }

#navigation ul li a 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 a { 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 a {  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 a { 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 a { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px;}
#navigation ul li.first ul li a { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px;}

And here is how I am trying to write a 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 is the level 2 submenu for eye is always visible, without even hovering on the 'Eye' tab and I just cannot seem to fix it. I want the "Left" and "right" submenu to appear only when one hovers on the "Eye" tab. And another problem that I found in the fiddle is that the menu hides itself on hovering over Left or Right sub menu. How can it be fixed ?

Any help would be much appreciated !

Answer 1

You are hiding the dropdown menu initially using display:none and try to use visibility:visible on hover of the li item which doesn't shows the dropdown menu at all.

Change this

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

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

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

DEMO

Answer 2

Check this, It may help you.

DEMO

CSS

ul, ul li {
    list-style-type:none;
    float:left;
    padding:5px;
}
ul li a {
    text-decoration:none;
}
li ul {
    display:none;
    position:absolute;
}
li ul li {
    float:none;
}
ul li:hover ul {
    display:block;
}
ul li:hover ul ul {
    display:none;
}
ul li ul li:last-child:hover ul {
    display:block;
}

Answer 3

http://jsfiddle.net/ZhWkP/10/
http://jsfiddle.net/ZhWkP/10/show

You used display:none to hide the second level ul and than use visibility set to visible on hover.

 /* apply a natural box layout model to all elements */
 *, *:before, *:after {
   -moz-box-sizing: border-box; 
   -webkit-box-sizing: border-box; 
   box-sizing: border-box;
  }

 #navigation ul ul ul {
      float: none;
      line-height: 28px;
      position: absolute;
      visibility: hidden;
      width: 100%;
      padding: 0 0 0 10px; /* allows to set padding to 100% element. */
 }

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