<div id="sidebar" style="margin-top:-5px;">
    <p style="display:block">
    <div class="parent">
		<ul>
			<li><a href="#" style="color:#FFF; font-size:16px; font-weight:bold; text-decoration:none;"> Academic Staff </a></li>
            </ul>
            </div></p>
            
            
            <div class="down">
			
            <p>
			<div class="parent1">
                
                <ul style="margin-left:20px">
                 <li><a href="#" style="color:#FFF; font-size:14px;">Certificate Request </a>
                
                 <div class="downinner1">
                 <ul style="margin-left:-10px">
                 <li  class="dinner"><a href="?type=certificate_tranzact"  style="color:#FFF; font-size:14px;" class="onit">Certificate tracking </a></li>
                 <li  class="dinner"><a href="?type=certificate_pending" style="color:#FFF; font-size:14px;" class="onit">Pending Certificate </a></li>
                 <li  class="dinner"><a href="?type=certificate_completed" style="color:#FFF; font-size:14px;" class="onit">Completed Certificate</a></li>
                 </ul>
                 </div>
                 </li>
                 </ul>
                 </div>
                 </p>
                 <p>
                 <div class="parent2">
                  <ul style="margin-left:20px">
                   <!--<li> <a href="?type=verification" style="color:#FFF; font-size:14px;">Verify Payments</a></li>-->
                   </ul></div></p>
                   <p>
<!--                 <div class="parent3">-->
<!--                  <ul style="margin-left:20px">-->

<!--<li><a href="#" style="color:#FFF; font-size:14px;">Payment Setting</a></li>-->
<!--</ul>-->
<!--</div>-->

			<!--<p>-->
   <!--              <div class="parent4">-->
   <!--               <ul style="margin-left:20px">-->

   <!-- <li> <a href="#" style="color:#FFF; font-size:14px;">Web Payment log </a></li>-->
   <!--  </ul></div></p>-->
        
        </div>
            <p style="display:block">
    <div class="parentout">
		<ul>
			<li><a href="?type=logout" style="color:#FFF; font-size:16px; font-weight:bold; text-decoration:none;"> Log Out </a></li>
            </ul>
            </div></p>
			<!-- Position for more menu list-->
		
        </div>
		
	</div>
    <style type="text/css">
	.onit:hover {
		display:block;
		width:100px;
		height:10px;
		font-weight:bolder;
		text-decoration:none;
		
	}
	
	.dinner:hover>a{
		display:block;
		width:100%;
		height:100%;
	}
	.dinner >a{
		display:block;
		width:100%;
		height:100%;
	}
	</style>