Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- CSS 2 Level Horizontal Nav problem

appi2 - 9:08 pm on Jun 25, 2008 (gmt 0)


You will need to add a bit of javasript for this to work in IE6.

I've made it centered, which then gives problems with the second level and where it shows on the left of the window.

I've added first/last class as its always handy to have (the green and tan colours).

Sizes are in em's. Which helps if some blind bat comes along with font size set to massive, the menu doesnt break.

Its by no means finished, lots of things to get right and play with.

Rather than me typing out lots of comments and why and what for, just ask or even better google ;) Have a play break it, add stuff, remove stuff and learn

Anyhoo have fun.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Dropdown Menu</title>

<style type="text/css">
/*START OF TOP DROP DOWN NAVIGATION MENU*/
* {
margin:0;
padding:0;
}

body {
font-size:100%;
}

.wrapper {
background-color: #F7840C;
height:1.4em;
width:100%;
border-bottom:1.4em solid red;
}
/*########################
START First Level of Menu
*/
#nav {
margin:0 auto;
text-align:center;
list-style: none;
width:56.3em;
font-size: 0.8em;
font-family:Arial, Helvetica, sans-serif;
}

#nav li {
float: left;
background-color: #F7840C;
padding: 0;
width:8em;
}
#nav li:hover, #nav li.sfhover, #navsmall li:hover {
background: #fff;
color:#000;
}

#nav a {
color:#FFFFFF;
display: block;
text-align:center;
text-decoration: none;
padding: 0.2em 0;
}

#nav a:focus,#nav a:hover,#nav a:active {
width:8em;
color:#000;
}
/*
END First Level of Menu
#######################*/

/*########################
START Second Level of Menu
*/
#nav ul{
list-style: none;
position: absolute;
left: -999em;
}

#nav li:hover ul {
position: absolute;
left:0;
top:auto;
margin-left:50px;
}

#nav li li {
float:left;
width:8em;
}

#nav li ul li a {
color:#fff;
text-align:center;
text-decoration:none;
padding: 0.2em 0;
}

#nav li li:hover {
border:0;
}

#nav li ul a:hover{
text-decoration:underline;
color:#000;
}
.twoline, .twoline a {
width:200px !important;
}
.first {background:green !important;}
.last {background:tan !important;}

/*END OF TOP DROP DOWN NAVIGATION MENU*/
</style>

</head>

<body>
<div class="wrapper">
<ul id="nav">
<li class="first"><a href="#">Big Stuff</a>
<ul>
<li class="first"><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li class="last"><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Little Stuff</a></li>
<li><a href="#">Stuff We Do</a>
<ul>
<li class="twoline first"><a href="#">Museums &amp; Exhibitions</a> </li>
<li><a href="#">Interiors</a></li>
<li><a href="#">Retail</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Events</a></li>
<li class="last"><a href="#">Signage</a></li>
</ul>
</li>
<li><a href="#">Our Stuff</a></li>
<li><a href="#">Stuff Others Say</a></li>
<li><a href="#">Tech Stuff</a></li>
<li class="last"><a href="#">Contact Stuff</a></li>
</ul>
</div>
</body>
</html>

ps I just had a play with the adobe spry version. I wanted to cry.

Thread source:: http://www.webmasterworld.com/css/3681555.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com