PDA

View Full Version : Horizontal menu with drop downs


chardy
08-24-2010, 10:09 PM
Hi,

My first website is live for my wifes' business (divinecakedesign.co.uk) but on certain screen resolutions the navigation drop down menu under "our cakes" shifts too far to the left/right to be able to click on a selection before it closes again despite trying different positions. Is there a better way to do this. Someone else set up this bit for me but I am not happy with the result. I've tried setting up Spry menu but it can't be used in a list so it says ! Any help much appreciated.
P.S. Any other tips to make it flow any better would be great :wink:

Rob_Che
08-26-2010, 04:48 PM
Hey Chardy...

Have you tried putting the ul sub-menu inside the <li> 'our cakes'?
You will then have a fixed point to attach the sub menu to.

You will need to give the 'our cakes' li "position: relative" in the css too.

Once you've done that you can position the sub-menu using css... top:5px;left:2px etc etc . . .

(all your li tags have class="nav" twice.)

This will look messy but let's try,,, and don't quote me I'm flying blind here... :)


<ul class="nav">
<li class="nav">
<a href="index.html">HOME</a>
</li>

<li class="nav">
<a href="#">OUR CAKES</a>

<ul >
<li>
<a href="#">text</a>
</li>
</ul>
</li>

<li class="nav">
<a href="blah.html">CONTACT US</a>
</li>
</ul>

CSS:
ul.nav li {
position: relative;
}
ul.nav li ul {
position: absolute;
top: 10px; /* or however many pixels from the top it needs to be */
left: 0;
}