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)
[url]http://joemayhew.co.uk/full-bore/classics/index.php
the CSS:
[code=html]
#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:
[code=html]<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