Menu rendering below content (Z-index)

nav menu rendering beneath content layers

I've just built a new GUI all in CSS as I cant use tables to make structure for the grid layout of content. So far everything has positioned perfectly, except for the nav menu which is rendering beneath the content layers

I havent been able to get around this by using the z-index, as some layers are relative and some are absolute... which means they wont share a stacking order.

Can anyone out there offer some advice or guidance to me please? I'm sure it will be something to do with the containers, and is probably painfully simple to someone out there reading this. Please help :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS - can you fix my page ?</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link href="styles-index.css" rel="stylesheet" type="text/css" />
<style>
@charset "utf-8";
/* CSS stuff */

body {
margin: 0;
padding: 10px 25px 10px 25px;
background: #233C70 url(images/body-bg.jpg) top left repeat-x;
font: 12px Trebuchet MS;
}
#main {
min-width: 950px;
background: #FFF url(images/bcc-cleat.jpg) top left repeat-y;
padding: 2px 2px 2px 9px;
}
#top {
height: 100px;
background: #FFF url(images/top-bg.jpg) top left repeat-x;
}
#logoImg {
position: relative;
left: 12px;
top: 12px;
float: left;
}
#BCC {
width:300px;
position: relative;
left: 25px;
top: 25px;
font: 28px Trebuchet MS;
letter-spacing: -1px;
color: #105A9C;
float: left;
}
.tagline {
font: bold 14px Times New Roman;
font-style:italic;
letter-spacing: 0px;
}
#search {
text-align: right;
position:relative;
top: 25px;
right: 10px;
}
#searchBox {
text-align: right;
}
#submit {
width: 104px;
margin-top: 2px;
}
#left {
position:relative;
width: 75%;
float: left;
z-index:3;
}
#right {
background-color: #FFF;
position:relative;
margin-left: 75%;
z-index:4;
text-align:left;
}
#rCol {
padding: 10px;
}
#rList {
list-style-type: disc;
list-style-image: url(bullet.gif);
list-style-position: inside;
}
.times {
font: 18px Times;
}

/* navigation menu */

#nav{
z-index:1;
color: #FFF;
margin: 0;
padding: 0;
height: 34px;
font: 14px Verdana;
letter-spacing: -1px;
background-image: url(images/nav-bg.jpg);
background-repeat: repeat-x;
position: relative;
}
#nav br {
margin-top: 10px;
}
.sub {
color: #FC0;
clear: both;
line-height: 10px;
display: block;
margin-bottom: 3px;
}
#menu{
width: 950px;
margin-bottom: 14px;
position: absolute;
}
#menu ul .item{
display: none;
}
#menu ul:hover .item{
width: 170px;
display: block;
padding: 1px 1px 1px 5px;
background-image:url(images/nav-li-bg.gif);
background-repeat: repeat-y;
}

#menu ul:hover .item a{
color: #fff;
text-decoration: none;
}
#menu ul:hover .item a:hover{
color: #FC0;
}

#menu ul{
z-index:1;
float: left;
margin: 0px;
padding: 2px 5px 2px 10px;
list-style: none;
width: 97px;
}
.clear{
clear: both;
height: 10px;
}
@charset "utf-8";
/* CSS Document */

#top1 {
position: absolute;
width:25%;
}
#top2 {
position: absolute;
left:25%;
width:25%;
}
#top3 {
position: absolute;
left:50%;
width:25%;
}
#top4 {
position: absolute;
left:75%;
width:25%;
}
#iBox1, #iBox2, #iBox3, #iBox4, #iBox5, #iBox6, #iBox7, #iBox8 {
padding: 10px 0 10px 15px;
font: 22px Times;
letter-spacing: -1px;
font-variant:small-caps;
height: 69px;
border-left: solid 1px #CCC;
}
#iBox1 {
background: #FFF url(images/iBox-about.jpg) top left repeat-x;
}
#iBox2{
background: #FFF url(images/iBox-planning.jpg) top left repeat-x;
}
#iBox3 {
background: #FFF url(images/iBox-environment.jpg) top left repeat-x;
}
#iBox4 {
background: #FFF url(images/iBox-traffic.jpg) top left repeat-x;
}
#iBox5 {
background: #FFF url(images/iBox-facilities.jpg) top left repeat-x;
}
#iBox6 {
background: #FFF url(images/iBox-laws.jpg) top left repeat-x;
}
#iBox7 {
background: #FFF url(images/iBox-community.jpg) top left repeat-x;
border-right: solid 1px #CCC;
}
#iBox8 {
background: #FFF url(images/iBox-payments.jpg) top left repeat-x;
border-right: solid 1px #CCC;
}
.iSub {
color: #003366;
clear: both;
line-height: 14px;
display: block;
}
</style>

</head>

<body>
<div id="main">
<div id="top">
<div id="BCC">website title<br />
<span class="tagline">italicized tagline</span></div>
<div id="search">
<input name="search" type="text" id="searchBox" />
<br />
<input type="submit" name="submit" id="submit" value="search council" />
</div>
</div>
<div id="nav">
<div id="menu">
<ul id="item1">
<li class="top">ABOUT<span class="sub">COUNCIL</span></li>
<li class="item"><a href="#">Lord Mayor</a></li>
<li class="item"><a href="#">Councillors & wards</a></li>
<li class="item"><a href="#">Meetings</a></li>
<li class="item"><a href="#">Elections</a></li>
<li class="item"><a href="#">History</a></li>
<li class="item"><a href="#">Council vision & strategies</a></li>
<li class="item"><a href="#">Organisation</a></li>
<li class="item"><a href="#">News & publications</a></li>
<li class="item"><a href="#">Jobs & careers</a></li>
<li class="item"><a href="#">Tenders</a></li>
<li class="item"><a href="#">Economic development</a></li>
<li class="item"><a href="#">Your say</a></li>
<li class="item"><a href="#">Contact Council</a></li>
</ul>
<ul id="item2">
<li class="top">PLANNING<span class="sub">& BUILDING</span></li>
<li class="item"><a href="#">Town planning</a></li>
<li class="item"><a href="#">Suburban planning</a></li>
<li class="item"><a href="#">Conveyancing & buying property</a></li>
<li class="item"><a href="#">Development & subdivision</a></li>
<li class="item"><a href="#">Building & renovating</a></li>
<li class="item"><a href="#">eBimap mapping tool</a></li>
</ul>
<ul id="item3">
<li class="top">TRAFFIC<span class="sub">& TRANSPORT</span></li>
<li class="item"><a href="#">Parking</a></li>
<li class="item"><a href="#">Traffic updates</a></li>
<li class="item"><a href="#">Traffic management</a></li>
<li class="item"><a href="#">Public transport</a></li>
<li class="item"><a href="#">Cycling</a></li>
<li class="item"><a href="#">Car pooling</a></li>
<li class="item"><a href="#">School transport</a></li>
<li class="item"><a href="#">Roads & footpaths</a></li>
<li class="item"><a href="#">Transport plans & projects</a></li>
</ul>
<ul id="item4">
<li class="top">ENVIRONMENT<span class="sub">& WASTE</span></li>
<li class="item"><a href="#">Water</a></li>
<li class="item"><a href="#">Sewerage</a></li>
<li class="item"><a href="#">Bushland & waterways</a></li>
<li class="item"><a href="#">Sustainable living</a></li>
<li class="item"><a href="#">Weeds</a></li>
<li class="item"><a href="#">Pests</a></li>
<li class="item"><a href="#">Green gardening</a></li>
<li class="item"><a href="#">Rubbish bins</a></li>
<li class="item"><a href="#">Recycling</a></li>
<li class="item"><a href="#">Rubbish tips & collections</a></li>
<li class="item"><a href="#">Trade waste</a></li>
<li class="item"><a href="#">Litter prevention</a></li>
</ul>
<ul id="item5">
<li class="top">COMMUNITY<span class="sub">SUPPORT</span></li>
<li class="item"><a href="#">Grants & awards</a></li>
<li class="item"><a href="#">Immunisation</a></li>
<li class="item"><a href="#">Safety</a></li>
<li class="item"><a href="#">Emergency management</a></li>
<li class="item"><a href="#">Housing & homelessness</a></li>
<li class="item"><a href="#">Indigenous programs</a></li>
<li class="item"><a href="#">Disability services</a></li>
<li class="item"><a href="#">Migrants & refugees</a></li>
<li class="item"><a href="#">Women</a></li>
<li class="item"><a href="#">Seniors</a></li>
<li class="item"><a href="#">Youth</a></li>
<li class="item"><a href="#">Educational resources</a></li>
<li class="item"><a href="#">Community plans & projects</a></li>
</ul>

<ul id="item6">
<li class="top">FACILITIES<span class="sub">& RECREATION</span></li>
<li class="item"><a href="#">My neighbourhood maps</a></li>
<li class="item"><a href="#">Libraries</a></li>
<li class="item"><a href="#">Cemeteries</a></li>
<li class="item"><a href="#">Parks & gardens</a></li>
<li class="item"><a href="#">Cycling & walking</a></li>
<li class="item"><a href="#">Sporting & leisure facilities</a></li>
<li class="item"><a href="#">Animals</a></li>
<li class="item"><a href="#">Educational facilities</a></li>
<li class="item"><a href="#">Halls & community hubs</a></li>
<li class="item"><a href="#">Community leasing</a></li>
<li class="item"><a href="#">Culture & heritage</a></li>
<li class="item"><a href="#">What�s On</a></li>
<li class="item"><a href="#">Plans & projects</a></li>
</ul>

<ul id="item7">
<li class="top">LAWS<span class="sub">& PERMITS</span></li>
<li class="item"><a href="#">Business laws & permits</a></li>
<li class="item"><a href="#">Animal laws & permits</a></li>
<li class="item"><a href="#">Protected vegetation</a></li>
<li class="item"><a href="#">Noise & light</a></li>
<li class="item"><a href="#">Graffiti</a></li>
<li class="item"><a href="#">Air pollution</a></li>
<li class="item"><a href="#">Fences</a></li>
<li class="item"><a href="#">Making a complaint</a></li>
<li class="item"><a href="#">Appealing a fine</a></li>
<li class="item"><a href="#">Local laws</a></li>
<li class="item"><a href="#">Permits & licences</a></li>
</ul>

<ul id="item8">
<li class="top">PAYMENTS<span class="sub">& eSERVICES</span></li>
<li class="item"><a href="#">Rates</a></li>
<li class="item"><a href="#">Pay a bill</a></li>
<li class="item"><a href="#">Rebates</a></li>
<li class="item"><a href="#">Lodge or apply</a></li>
<li class="item"><a href="#">Search council records</a></li>
<li class="item"><a href="#">Subscribe</a></li>
<li class="item"><a href="#">Forms</a></li>
<li class="item"><a href="#">Maps</a></li>
</ul>
</div>
</div>
<div id="left">
<div id="topDiv">
<div id="top1">
<div id="iBox1"> about<br />
<span class="iSub">council</span></div>
<div id="iBox2"> planning<br />
<span class="iSub">& building </span></div>
</div>
<div id="top2">
<div id="iBox3"> environment<br />
<span class="iSub">& waste</span></div>
<div id="iBox4"> traffic<br />
<span class="iSub">& transport</span></div>
</div>
<div id="top3">
<div id="iBox5">facilities<br />
<span class="iSub">& recreation</span></div>
<div id="iBox6"> laws<br />
<span class="iSub">& permits</span></div>
</div>
<div id="top4">
<div id="iBox7"> community<br />
<span class="iSub">support</span></div>
<div id="iBox8"> payments<br />
<span class="iSub">& eServices</span></div>
</div>
</div>
<p>here is where the next layer of copy should render</p>
</div>
<div id="right">
<div id="rCol">
<span class="times">WANT TO....</span>
<ul id="rList">
<li>email council</li>
<li>search library catalogue</li>
<li>find a council job</li>
<li>report maintenance issue</li>
<li>have your say</li>
</ul>
</div>
</div>
</div>
</body>
</html>

Menu rendering below content (Z-index)

my menu <ul> layers show beneath content divs

cloudsail

le_gber

cloudsail

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week