Pure CSS popup menus - almost there [Archive]

chadjohnson

05-11-2006, 12:12 AM

Hi,

At work I have to do popup menus (I hate them), so I am trying with all I have to not use Javascript. I have the following working using just CSS and HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>Pure CSS Popups</title>

<style type="text/css">

body
{
font-family: Arial;
}

div#menubar
{
background-color: steelblue;
font-weight: bold;
}

div#menubar a.menuhead
{
position: relative;
text-decoration: none;
margin-right: 18pt;
color: darkblue;
}

div#menubar a.menuhead:hover
{
color: white;
background-color: darkblue;
}

div#menubar a.menuhead div.menu
{
visibility: hidden;
position: absolute;
left: 0;
top: 1em;
width: 15em;
background-color: steelblue;
border: 2px solid darkblue;
}

div#menubar a.menuhead:hover div.menu
{
visibility: visible;
}

div#menubar a.menuhead div.menu div.menuitem
{
width: 100%;
cursor: pointer;
background-color: steelblue;
border-bottom: 1px solid darkblue;
}

div#menubar a.menuhead div.menu div.menuitem:hover
{
background-color: darkblue;
}

div.menuitem a
{
}

</style>
</head>

<body>

<div id="menubar">
<a class="menuhead" href="">Menu 1
<div class="menu">
<div class="menuitem">Menuitem 1</div>
<div class="menuitem">Menuitem 2</div>
<div class="menuitem">Menuitem 3</div>
<div class="menuitem">Menuitem 4</div>
<div class="menuitem">Menuitem 5</div>
</div>
</a>
</div>

</body>
</html>

Now what I want to do is put real hyperlinks inside of the menuitem divs. However, when I do so it messes up for some strange reason in both Firefox and IE. If someone could tell me why I would GREATLY appreciate it.

<div id="menubar">
<a class="menuhead" href="">Menu 1
<div class="menu">
<div class="menuitem">Menuitem 1</div>
<div class="menuitem">Menuitem 2</div>
<div class="menuitem"><a href="">Menuitem 3</a></div>
<div class="menuitem">Menuitem 4</div>
<div class="menuitem">Menuitem 5</div>
</div>
</a>
</div>

In Firefox, the menu items after the one with the hyperlink no longer format correctly, and the menu also becomes part of the menubar.

In IE it looks ok, but when the mouse is moved over the menuitem hyperlink the menu goes away.

In both, the menuitem divs get shrunk down to the width of the text.

Any ideas???

KDLA

05-11-2006, 07:38 AM

As to the IE problem, you might give this a look: http://www.meyerweb.com/eric/css/edge/menus/demo.html
Meyer says that some pure CSS drop-downs aren't supported by IE, because IE doesn't interpret CSS2 like Gecko-based browsers.

You might consider using a Suckerfish Dropdown:
http://www.alistapart.com/articles/dropdowns/
http://www.htmldog.com/articles/suckerfish/dropdowns/

They do use Javascript, but are CSS-based and cross-browser compliant.

Good Luck -
KDLA

chadjohnson

05-11-2006, 09:18 AM

Thanks - I think I might try using the Suckerfish ones like you suggested. Those look pretty good since the javascript is only necessary for IE.