CSS-only dropdown menus

I'm toying a bit with a horizontal CSS-dependant dropdown menu. See
<http://santek.no-ip.org/~st/tests/CSS/cssmenus.php>.

Gecko's lack of support of display:inline-block is too bad, but aside
from that both Mozilla 1.7.5 and Opera 8.0 (for Mac, build 1945) for
some reason do not draw the third level's background and borders unless
you hover over them. iCab and Safari do (as can be seen in the
screenshot on that page).

I wonder why. Seems to be an inheritance thing, but I'm not sure which
behaviour is correct: Mozilla and Opera's, or iCab and Safari's?

--
Sander Tekelenburg, <http://www.euronet.nl/%7Etekelenb/>

Sander Tekelenburg wrote:

I'm toying a bit with a horizontal CSS-dependant dropdown menu. See
http://santek.no-ip.org/~st/tests/CSS/cssmenus.php>.

Gecko's lack of support of display:inline-block is too bad [...]

Why don't you use display:block?

Chris

I'm toying a bit with a horizontal CSS-dependant dropdown menu. See

http://santek.no-ip.org/~st/tests/CSS/cssmenus.php>.

Gecko's lack of support of display:inline-block is too bad [...]

Why don't you use display:block?

Because display:block will give you a vertical menu, not a horizontal
one.

I use display:inline like this:

li.menubutton { display: inline; position: relative; }
ul.dropdownmenu { display: none; }
li.menubutton:hover ul.dropdownmenu { display: block; position:
absolute; }

<ul class="menubar">
<li class="menubutton">
Menu1
<ul class="dropdownmenu">
<li>fe</li>
<li>fi</li>
</ul>
</li>
<li class="menubutton">
Menu2
<ul class="dropdownmenu">
<li>fo</li>
<li>fum</li>
</ul>
</li>
</ul>

It seems to work (I use the csshover.htc hack for IE), but I suspect
that I am breaking some rules somewhere. Any comments?

--Phil.

Hi,

I'm toying a bit with a horizontal CSS-dependant dropdown menu. See
http://santek.no-ip.org/~st/tests/CSS/cssmenus.php>.

Gecko's lack of support of display:inline-block is too bad [...]

Why don't you use display:block?

Because display:block will give you a vertical menu, not a horizontal
one.

And if you try to float:left the block? This should behave like
inline-block.

But if your solution works, great!

Chris