Submenu items overlapping
<p>my navigation is like below....</p>

<pre><code>&lt;div id="topnav"&gt;
  &lt;ul&gt;
  &lt;li class="active"&gt;&lt;a class="" href="#"&gt;About Us&lt;/a&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="link"&gt;About Our College&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="link"&gt;From Chairman's Desk&lt;/a&gt;&lt;/li&gt;
            &lt;li class="last"&gt;&lt;a href="link"&gt;Governing Body&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;   
      &lt;/li&gt;
      &lt;li class=""&gt;&lt;a class="" href="#"&gt;Admission&lt;/a&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="link"&gt;Admission Procedure&lt;/a&gt;&lt;/li&gt;
            &lt;li class="last"&gt;&lt;a href="link"&gt;Fees Structure&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>and <code>CSS</code> as follows</p>

<pre><code>#topnav{height:75px; overflow:hidden;}
#topnav ul{display:block; width:100%; height:75px; margin:0; padding:0; list-style:none;}
#topnav ul li ul{display:none;}
#topnav ul li.active ul{display:block; position:absolute; top:35px; left:0; width:100%; height:40px;}
#topnav li{display:block; float:left;}
#topnav li.last{margin-right:0;}
#topnav ul li a:link, #topnav ul li a:visited, #topnav ul li a:hover{display:block; float:left; height:25px; padding:10px 15px 0 15px; color:#333333; background-color:#E5E2C9;}
#topnav ul ul li a:link, #topnav ul ul li a:visited, #topnav ul ul li a:hover{float:left; height:auto; margin:13px 15px 0 0; padding:0 16px 0 0; color:#FFFFFF; background-color:#591434; border-right:1px solid #FFFFFF;}
#topnav ul ul li.last a{margin-right:0; padding:0; border-right:none;}
#topnav ul li.active a, #topnav ul li a:hover{color:#FFFFFF; background-color:#591434;}
#topnav ul li:hover &gt; a {background-color:#591434;color:#ffffff;}
#topnav ul li:hover ul {display:block; position:absolute; top:35px; left:0; width:100%; height:40px;}
</code></pre>

<p>Problem is, while I hover the parent it shows the previous item's submenu. like</p>

<p><a href="https://i.stack.imgur.com/auS00.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/auS00.jpg" alt="Menu Details"></a></p>

<p>I've deleted the <code>.active</code> class i.e.</p>

<pre><code>#topnav ul li.active ul{display:block; position:absolute; top:35px; left:0; width:100%; height:40px;}
</code></pre>

<p>But then the menu not showing the submenu items and showing like</p>

<p><a href="https://i.stack.imgur.com/W97f9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W97f9.jpg" alt="Menu2"></a></p>

<p>What should I do ?</p>

<p><strong>UPDATE</strong></p>

<p>I've corrected my <code>html</code> code. All the <code>li</code> reside under <code>ul</code>.</p>