dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Drop down menu, Parent width issue

  1. #1
    Join Date
    Dec 2009
    Location
    UK
    Posts
    30

    Drop down menu, Parent width issue

    Hi Guys

    i am having a slight issue with my CSS drop down menu.

    because the child links are being pulled out of a data base they can very in size when i role over the parent link its width expands to the width of the longest child link.

    how can i keep the parent link at 110px, but allow child links to be as long as required?

    i tried a few things most sucessful was setting a max-width: on the parent and a min-width: on the child, this worked in chrome but nothing else.

    (see "gallery" role-over)
    http://joemayhew.co.uk/full-bore/classics/index.php

    the CSS:
    HTML Code:
    	#menu ul ul {
    		display:none;
    		margin:0px;
    		padding: 0px;
    		background-color:#8c1818;
    		color:#FFFFFF;
    		float:none;
    		z-index:100;
    		/*min-width:250px;*/
    		}
    		#menu li:hover ul{
    		display:block;
    		}
    		#menu li ul a:link { background-color:#66CCFF;}
    		/*#menu li#link6 {max-width:110px;}*/
    the HTML:
    HTML Code:
    <div id="menu"> 
                        <ul> 
                        <li id='link1'> <a href='index.php'>Home</a></li> 
                            <li id='link2'> <a href='shop.php'>Shop</a> </li> 
                                <li id='link3'> <a href='bikes4sale.php'>Bikes for Sale</a></li> 
                                    <li id='link4'> <a href='workshop.php'>Workshop</a> </li> 
                                        <li id='link5'> <a href='contact.php'>Contact</a></li> 
                                            <li id='link6'> <a href='gallery.php'>Gallery</a> 
                                                <ul> 	
    										<li><a href='photos.php?album=2'>Second Album</a></li> 	
    									<li><a href='photos.php?album=1'>First Album</a></li> 
    </ul> 
                                            </li> 
                  <li id="link7"> <a href="links.php">Links</a> </li> 
                        </ul>	
                        </div>

    Thanks in advance

  2. #2
    Join Date
    Dec 2009
    Location
    UK
    Posts
    30
    I fixed the problem

    with only 2 lines of CSS

    HTML Code:
    #menu li:hover ul{
    		display:block;
    				position:absolute;/* added */
    		}
    
    .Contaner #menu li a {
    		white-space: nowrap; /* Added */
    	}
    works fine now

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles