<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;"> Bursary 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;">Online Payment </a>
                
                 <div class="downinner1">
                 <ul style="margin-left:-10px">
                 <li  class="dinner"><a href="?type=acceptance_tranzact"  style="color:#FFF; font-size:14px;" class="onit">Acceptance </a></li>
                 <li  class="dinner"><a href="?type=schoolfees_tranzact" style="color:#FFF; font-size:14px;" class="onit">School Fees </a></li>
                 <li  class="dinner"><a href="?type=certificate" style="color:#FFF; font-size:14px;" class="onit">Certificate Fees </a></li>
                 
                 
                 <!-- New colum -->
                 
                  
                   
                  
			
                
                <!-- <li><a href="#" style="color:#FFF; font-size:14px;" class="another_parent">Certificate Fees </a>
                
                 <p>
			<div class="parent7">
                
                
                <ul style="margin-left:-10px">
                 <li  class="dinners"><a href="?type=certificate_tranzact"  style="color:#FFF; font-size:14px;" class="onits">Tracking List </a></li>
                 <li  class="dinners"><a href="?type=schoolfees_tranzact" style="color:#FFF; font-size:14px;" class="onits">Pending List </a></li>
                 <li  class="dinners"><a href="?type=certificate_tranzact" style="color:#FFF; font-size:14px;" class="onits">Completed List </a></li>
                 </ul>
                 
                 
                 
                </li>
                </div>
                </p>-->
                
                 
                 
                 <!-- Ends here -->
                 </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>
                   
                   
                  
 
        </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>