Focus...

Let's say I have a navigation bar which I made with an un-ordered list.


<ul id="navigation">
<li><a href="#" title="...">Home</a></li>
<li><a href="#" title="...">Forum</a></li>
<li><a href="#" title="...">Contact</a></li>
<li><a href="#" title="...">About</a></li>
<ul>


Let's also assume that I have styled the ul/lis to look like a navigation bar. Now I want to create a css rollover type thing whereas when one hovers over something in my navigation bar another menu appears below it. I know how to do this with CSS or Javascript or both, what I want to know is how do I/is it possible to give it focus WITHOUT using Javascript?

How it works now is you hover over "Home" for example and the hover menu appears below it. When you scroll your mouse cursor down to hover over the menu it dissapears because it doesn't have focus because you aren't hovering over the a...

Gah, did that make any sense at all?

I'm not very good at explaining things.

You don’t apply the hover to the anchor, you apply it to the list item, i.e.:

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



li ul {
position: absolute;
left: -999em;
}
ul li:hover ul {left: auto;}


This doesn’t work in IE 6 for which you need JavaScript.

Best is you check out the Son of the Suckerfish (http://www.htmldog.com/articles/suckerfish/dropdowns/) menu where this all is applied and explained.

I've heard about the "Suckerfish" and "Sons of Suckerfish" thing before, but I'd completely forgot about it. Thanks.

To be perfectly honest, I couldn't give a crap about IE. I make it a habit to only support IE7 and ask older IE users to upgrade or switch on my Websites.

I just have a thing against using so many hacks and spending so much time just to get things to work in one stupid Browser. :D

Regarding this:


li ul {
position: absolute;
left: -999em;
}
ul li:hover ul {left: auto;}


Could I not set the display to none then on hover change it to block instead, achieving basically the same result?