Help with CSS Menus

dreamer610 · Jan 11, 2010

Hi,
I'm trying to create a menu which allows for multiple levels of submenus, but I cannot figure out how to get the 2nd level to show. I've tried many different things but only the first level will appear. Below is my code. Any help anyone can offer would be greatly appreciated.

<html>
<head>
<style type="text/css">
#sddm
{ margin: 0;
padding: 0;
z-index: 30}

#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial}

#sddm li a
{ display: block;
margin: 0 2px 0 0;
padding: 4px 10px;
width: 60px;
background: #cccc66;
color: #FFF;
text-align: center;
text-decoration: none}

#sddm li a:hover
{ background-color: #FFFF99; color:#000}

#sddm div
{ position: relative; z-index:35;
display:none;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #000}

#sddm li:hover div ul li div
{ position: absolute;
display:none;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #000}

#sddm div a
{
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #fff;
color: #000;
font: 11px arial}

#sddm li:hover div
{position:absolute;
display:block;
background: #49A3FF;
color: #000}

#sddm li:hover div ul li:hover div:hover
{ position: absolute;
display:block;
margin: 0;
padding: 0;

background: #EAEBD8;
border: 1px solid #000}

</style>
</head>

<body>
<ul id="sddm">
<li><a href="#" >Item 1</a>
<div>
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
<a href="#">Item 5</a>
</div>
</li>
<li><a href="#">Item 2</a>
<div>
<a href="#">Item 1</a>
<ul><li><div>
<a href="#">Sub-Item 1</a>
<a href="#">Sub-Item 2</a></div></li></ul>
<a href="#">Item 2</a>
<ul><li><div>
<a href="#">Sub-Item 1/a>
<a href="#">Sub-Item 2</a></div></li></ul>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
</div>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>

</ul>

</body>

BillyRayPreachersSon · Jan 11, 2010

Presumably you mean it doesn't work in IE, as it works fine in Firefox.

This being the case, it will be due to one of two things, depending on which version of IE you are running:

1. You are using a version of IE that doesn't support the :hover pseudo-class on anything other than anchors (e.g. 6). You'll need a small amount of JS to get around this unless you rework your markup to make the anchors have the hover on them (which should be dead easy given your basic layout).

2. You are using a version of IE that does support the :hover pseudo-class on non-anchor elements (e.g. 8), but is failing to do so because of the lack of DOCTYPE forcing it into quirks mode (which does not support this).

If you had tried validating your code, you would have seen the problem, as you would have added a DOCTYPE and all would have been well.

Hope this helps (and teaches you the value of validating your code),

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

Vragabond · Jan 11, 2010

I would still suggest though to go with the well-established solution:

http://htmldog.com/articles/suckerfish/dropdowns/

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Help with CSS Menus

dreamer610

MIS

BillyRayPreachersSon

Programmer

Vragabond

Programmer

Similar threads

Part and Inventory Search

Sponsor