I tried to implement the following CSS code [Archive]

Malletman

04-13-2011, 05:41 PM

but it will not activate the third level list in Firefox (unless edit CSS in the web developer toolbar is turned on).
The menu does not work at all in Internet Explorer
I want to be able to implement this code without JavaScript because I know that some users disable JavaScript.
The code is from: http://www.devinrolsen.com/pure-css-vertical-menu/comment-page-10/#comment-5149

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Dropdown List</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="main.css" rel="stylesheet" type="text/css" /></link>
<script type="text/javascript" src="checkValues.js">
</script>
</head>
<body>
<div id="container">
<div id="header">
<h1>A simple webpage with a span dropdown list</h1>
</div>
<div id="navigation">
<ul>
<li>Item 1
<ul>
<li>Sub menu item 1
<ul>
<li>Sub Sub Menu Item 1</li>
<li>Sub Sub Menu Item 2</li>
<li>Sub Sub Menu Item 3</li>
<li>Sub Sub Menu Item 4</li>
</ul>
</li>
<li>Sub menu item 2</li>
<li>Sub menu item 3</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Sub menu item 1</li>
<li>Sub menu item 2
<ul>
<li>Sub Sub Menu Item 1</li>
<li>Sub Sub Menu Item 2</li>
<li>Sub Sub Menu Item 3</li>
<li>Sub Sub Menu Item 4</li>
</ul>
</li>
<li>Sub menu item 3</li>
</ul>
</li>
<li>Item 3
<ul>
<li>Sub menu item 1</li>
<li>Sub menu item 2</li>
<li>Sub menu item 3
<ul>
<li>Sub Sub Menu Item 1</li>
<li>Sub Sub Menu Item 2</li>
<li>Sub Sub Menu Item 3</li>
<li>Sub Sub Menu Item 4</li>
</ul>
</li>
</ul>
</li>
<li>Item 4
<ul>
<li>Sub menu item 1</li>
<li>Sub menu item 2</li>
<li>Sub menu item 3</li>
</ul>
</li>
<li>Item 5
<ul>
<li>Sub menu item 1</li>
<li>Sub menu item 2</li>
<li>Sub menu item 3</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>

/*css starts here*/

body{
background-color: white;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
margin: 0;
}
#container{
width: 950px;
margin: 0 auto;
border: 1px solid #000;
background-color: #fff;
}

#header {
position: relative;
border-bottom: 1px solid #000;
height: 100px;
text-align: center;
background-image: url(/graphics/Title.jpg);
}

#header h1 {
margin: 0;
padding: 0;
}

#navigation {
width:150px;
font-size:12px;
}

#navigation ul {
margin: 0px;
padding: 0px;
background-color: #000;
}

#navigation ul li {
height: 25px;
line-height: 25px;
list-style: none;
padding-left: 10px;
color: #fff;
border-top: #fff solid;
border-bottom: #fff solid;
border-width: 1px;
cursor: pointer;
}

#navigation ul li:hover {
background-color: #f90;
position: relative;
}

#navigation ul ul {
display: none;
position: absolute;
left: 150px;
top: -1px;
border: #fff solid;
border-width: 1px;
background-color: #999;
}

#navigation ul li:hover ul {
display: block;
}

#navigation ul ul li {
border: none;
width: 150px;
float: left;
display: inline;
}

#navigation ul ul li:hover {
text-decoration: underline;
border: none;
}

#navigation li:hover ul li ul {
display: none;
position: absolute;
left: 160px;
top: -1px;
border: #fff solid;
border-width: 1px;
background-color: #999;
}

#navigation ul > ul > ul > ul ul li ul {
left: 110px;
background-color: #0099CC;
}

#navigation ul ul li:hover ul{
display: block;
}