Pure CSS popup menus - almost there

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>

Code (markup):

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>

Code (markup):

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???

Log in or Sign up

Pure CSS popup menus - almost there

chadjohnson Guest

johneva Well-Known Member

Log in or Sign up

Pure CSS popup menus - almost there

chadjohnson Guest

johneva Well-Known Member

Useful Searches