#1
  1. Senior Water Wizard
    ASP Mastermind (5000+ posts)

    Join Date
    Aug 2004
    Location
    Cape Town, RSA
    Posts
    10,233
    Rep Power
    863

    Drop down list box menu positioning


    hi everyone, its been a while, been crazy at work, hope you
    have all been well

    ok, onto my problem, I have a menu that has a side drop down, its showing fine, but because I am using absolute positions, and its a 3 column type site with the data in the middle, if the users resolution is not the same as mine the left position keeps changing.

    I would like to know how I can make it fixed, if possible??

    Code:
    <table width="100%">
    	<tr>
    		<td>&nbsp;</td>
    		<td width="800px">
    			<div id="list-menu">
    				<ul>
    					<li><a href="#">Newsletter</a></li>
    					<li><a href="#">Electronic Diet Diary</a></li>
    					<li><a href="#">Advertise</a></li>
    					<li><a href="#">Search Google</a></li>
    					<li><a href="#">Journal Exchange</a></li>
    					<li><a href="#">Buy</a></li>
    						<ul>
    							<li><a href="#">2nd Books</a></li>
    							<li><a href="#">Kalahari.Net</a></li>
    						</ul>
    					<li><a href="#">Auction</a></li>
    					<li><a href="#">Events</a></li>
    					<li><a href="#">Help lines</a></li>
    					<li><a href="#">Donations</a></li>
    					<li><a href="#">Contact us</a></li>
    				</ul> 
    			</div> 
    		</td>		
    		<td>&nbsp;</td>
    	</tr>
    </table>
    here is the css:
    Code:
    #list-menu {
    	width: 120px;
    }
    #list-menu ul {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	font-family: Arial;
    	font-size: 11px; 
    } 
    #list-menu li {
    	margin: 1px 0 0;
    } 
    #list-menu li ul {
    	display: none;
    } 
    #list-menu li:hover ul  {
    	position: absolute;
    	left: 288px;
    	top: 273px;
    	display: block;
    } 
    #list-menu a {
    	display: block;
    	width:120px;
    	padding: 2px 2px 2px 10px;
    	border: 1px solid #000000;
    	background: #dcdcdc;
    	text-decoration: none;
    } 
    #list-menu a:link, #list-menu a:active, #list-menu a:visited {
    color: #000000;
    }
    
    #list-menu a:hover {
    border: 1px solid #000000;
    background: #CF0372 url(images/background1.gif);
    color: #ffffff;
    }
    the section in red is where my problem lies, is there any way to get this right?

    I tried playing with relative positions, but then it moves my other menus down when I hover on buy.

    Any help will be appreciated.

    Thanks
    NF

    PS. I know I should only use CSS instead of tables, but I suck at CSS
    Look! Its a ShemZilla


  2. #2
  3. Contributing User
    ASP Hero (2000 - 2499 posts)

    Join Date
    Nov 2003
    Location
    UK
    Posts
    2,280
    Rep Power
    314

    Drop down list box menu positioning


    try simply adding style to float left on the list-menu div, something like:

    Code:
    <div id="list-menu" style="float: left;">
    Hope this advise helps.

    If so please show your appreciation by adding reputation points (click gauge image on top right of this post and score).

Similar Threads

  1. Load list in drop down with tickbox
    By antonyx in forum HTML, JavaScript And CSS Help
    Replies: 1
    Last Post: March 21st, 2007, 01:58 PM
  2. Onchange event for drop down menu - ASP, SQL
    By misskaos99 in forum ASP Development
    Replies: 3
    Last Post: November 30th, 2006, 05:28 AM
  3. Drop Down list
    By balrajkatariya in forum HTML, JavaScript And CSS Help
    Replies: 9
    Last Post: May 2nd, 2006, 07:41 AM
  4. Image icons in a drop down jump menu or list
    By shadowspell in forum ASP Development
    Replies: 2
    Last Post: November 28th, 2005, 09:47 PM
  5. System hangs when trying to create a folder with ASP
    By ImSir2U in forum ASP Development
    Replies: 9
    Last Post: November 8th, 2005, 07:42 PM

IMN logo majestic logo threadwatch logo seochat tools logo