...

View Full Version : I tried to implement the following CSS code



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;
}

Malletman
04-13-2011, 06:16 PM
I forgot to declare a doctype and I had a /link tag after the section where I included the CSS. (allows the code to work the same in Firefox and in Internet Explorer)

The third level lists (the sub sub items) still do not work.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum