Zygoma
1
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-menu-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
ralphm
2
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
3
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
ralphm
4
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;
}