title: Level 2 submenu always visible
body: <p>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. </p>
  
  <p>Here is the navigation bit from css file (I know it looks ugly ): )</p>
  
  <pre><code>#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 &gt; li.last { background: transparent; width: auto; float: left; padding-right: 0; }
  #navigation ul &gt; 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 &gt; 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;}
  </code></pre>
  
  <p>And here is how I am trying to write a sub-menu</p>
  
  <pre><code>&lt;nav id="navigation"&gt;
                              &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Individual Patient Analysis&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;
                              &lt;a href="#"&gt;Multiple Patient Analysis&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Gender&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Age&lt;/a&gt;&lt;/li&gt;
  
                                      &lt;li&gt;&lt;a href="#"&gt;Field Number&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Occupation&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Eye&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Left&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Right&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
  
  
                              &lt;li&gt;&lt;a href="#"&gt;Upload File&lt;/a&gt;&lt;/li&gt;
  
                          &lt;/ul&gt;
                      &lt;/nav&gt;
  </code></pre>
  
  <p>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 ?</p>
  
  <p>Any help would be much appreciated !</p>