Drop Down Menu Not Showing Siblings On Hover :-(

[Zygoma]

Buongiorno from 9 degrees C sunny York UK :-)

On this page http://tutorial.davidclick.com/philpotts-clone.html Ive been trying in vein to trigger a drop down menu when you hover over the About menu tab.

Ive been following this tutorial but i just cant replicate it http://aext.net/2009/09/elegant-drop...with-css-only/

Here is the css causing the problem:

#navigation .sibling
 {
display:none;	 
}
	 
	 
#navigation .sibling li:hover ul
{
display:block;
}

and here is the HTML

<div id="navigation">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a>
            <ul>
            <li class="sibling"><a href="">Take out the competition</a></li>
            <li class="sibling"><a href="">In you face domination</a></li>
            </ul>
            </li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Contact us</a></li>
		</ul>

A fix would be great & a bit of theory why mine didnt even better!

Grazie tanto,
David

[ralph.m]

Tha ought try sommat like this:

#navigation li {
position:relative;
float: left;
}

#navigation li ul {
position: absolute;
left: 0;
width: 100px;
background: red;
top: 100%;
}

#navigation li ul {
position: absolute;
left: -9999px;
}

#navigation li:hover ul {
left: 0;
}

The red background is just to make it easier to see.

[Zygoma]

Excellent that worked but.... the repetition of #navigation li ul has thrown me in that its done twice but with a -9999px bit in the second.

If any ones got the time to give me a bit of theory of how this works much appreciated :-)

#navigation li ul {
position: absolute;
left: 0;
width: 100px;
background: red;
top: 100%;
}

#navigation li ul {
position: absolute;
left: -9999px;
}

Grazie tanto,
David

[ralph.m]

the repetition of #navigation li ul has thrown me

Sometimes you can credit people with too much intelligence. I was in a hurry, and made a mess of it. This is what I should have posted:

#navigation li {
position:relative;
float: left;
}

#navigation li ul {
position: absolute;
left: -9999px;
width: 100px;
background: red;
top: 100%;
}


#navigation li:hover ul {
left: 0;
}

[Zygoma]

Thanks Ralph :-)