Level 2 submenu always visible - html

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>Individual Patient Analysis</li>
<li>
Multiple Patient Analysis<span></span>
<ul>
<li>Gender</li>
<li>Age</li>
<li>Field Number</li>
<li>Occupation</li>
<li>Eye<span></span>
<ul>
<li>Left</li>
<li>Right</li>
</ul>
</li>
</ul>
</li>
<li>Upload File</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;
}