#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2008
    Posts
    127
    Rep Power
    0

    Drop down menu not aligning


    i am designing a website which requires drop down menus, the problem is that all the drop down menus are appearing at the same position, i want the top down menus to be located under the tab which was clicked. i have provided screenshots as well as some of the code.

    html code:
    Code:
    <ol id="navMenu">		
    		<li class="first"><a href="welcome.php">Home</a></li>
    
    
    <li><a href="#" onmouseover="drop_down('sm1')" onmouseout="close_soon('sm1')">Reserve Resource</a></li>
    		<div id="sm1" onmouseover="cancel_timeout()" onmouseout="close_soon('sm1')">
    		<a href="#">yghvjhb</a>
    		<a href="#"> jkhjb</a>
    		</div>
    		
    <li><a href="#" onmouseover="drop_down('sm2')" onmouseout="close_soon('sm2')">Inventory</a></li>
    		<div id="sm2" onmouseover="cancel_timeout('sm2')" onmouseout="close_soon('sm2')">
    		<a href="#">Reserve Laptop</a>
    		<a href="#">Reserve Tables</a>
    		</div></ol>
    css :

    Code:
    #navMenu{
    	clear: left;
    	background-color: #DA0000;
    	padding: 0.5em 3em;
    	padding-left: 8.5em; 
    	margin: 0em;
    }
    #navMenu li{
    	display: inline;
    	margin: 0 0 0 0;
    	border-right:medium #FFFFFF ridge;
    	list-style: none;
    	font-size: large;
    	font-weight:bold;
    	
    
    }	
    #navMenu a{
    	text-decoration: none;
    	padding: 0.25em 0.75em 0.25em 0.75em;
    	color: #FFC1C1;
    }
    #navMenu li a:hover, #navMenu a:focus{
    	background-color: #EE3322;
    }
    #navMenu li.first{
    	margin-left: 0em;
    }
    #navMenu li.last{
    	border-right: 0;
    }
    
    
    #navMenu div{visibility: hidden; display:block; position:absolute; background-color: #EE3322; background-position: inherit; margin-top:0.54em;}
    
    #navMenu div a { position:relative; display:block; width:auto; white-space: nowrap; text-align: left; margin-right:2em; padding: 1em 1em;
    }
    
    #navMenu div a:hover{background-color: #EE3322; background: #EE3322;}
    Attached Images
    CCNA,MTA
    if u can't see the the bright side of your life,polish the dull side!!!
    www.anadisays.blogspot.com

IMN logo majestic logo threadwatch logo seochat tools logo