Hi,
I've built this navigation using CSS Navcontainer (with Pbmod's help) and it works perfect in every browser and platform apart from IE6!
Here is the HTML
[HTML]<div id="navcontainer">
<ul>
<a href="#">Home page</a>
<a href="#">What's new</a>
<a href="#">About us</a>
<div class="submain"><a href="SubMain_who.html" target="_top">Who we work with</a>
<div class="navcontainersub">
<a href="#">Schools</a>
<a href="localauthorities.html" target="_top">Local Authorities</a>
<a href="#">Charities</a>
</div>
</div>
<div class="submain"><a href="SubMain_services.html" target="_top">Our services</a>
<div class="navcontainersub">
<a href="#">Well-Being</a>
<a href="#">EAP</a>
<a href="#">Headspace</a>
<a href="#" class="current">Training & development</a>
</div>
</div>
<a href="#">Contact us</a>
</ul>
</div>[/HTML]
and the CSS
- #navcontainer {
-
float: left;
-
padding-top: 0px;
-
padding-bottom: 5em;
-
width: 173px;
-
text-align:left;
-
}
-
-
#navcontainer ul {
-
margin: 0;
-
padding: 0;
-
border: 0;
-
font: 12px Trebuchet MS, verdana, arial, sans serif;
-
letter-spacing: -0.2px;
-
text-indent: 24px;
-
height: 21px;
-
width:171px;
-
list-style:none;
-
}
-
-
#navcontainer a {
-
background: url(../images/nav_back.gif);
-
display: block;
-
width: 171px;
-
padding-top: 6px;
-
height: 20px;
-
}
-
-
#navcontainer a:link, #navcontainer a:visited {
-
color:#000000;
-
text-decoration: none;
-
}
-
-
#navcontainer a:hover {
-
background: url(../images/nav_back_man.gif);
-
color:#FFFFFF;
-
text-decoration: none;
-
padding-top: 6px;
-
height: 20px;
-
}
-
-
#navcontainer .submain:hover a {
-
background: url(../images/nav_back_man.gif);
-
}
-
-
#navcontainer .submain .current {
-
background: url(../images/nav_back_man.gif);
-
color:#FFFFFF;
-
}
-
-
#navcontainer .submain:hover .navcontainersub a{
-
background: url(../images/nav_sub_hover.gif);
-
color:#666666;
-
}
-
-
#navcontainer .submain .navcontainersub:hover a {
-
background: url(../images/nav_sub_hover.gif);
-
color:#666666;
-
font: 11px Trebuchet MS,verdana, arial, sans serif;
-
text-indent: 30px;
-
height: 17px;
-
}
-
-
/* No Hover on Nav*/
-
#navcontainer .submain .navcontainersub a {
-
background: url(../images/nav_sub_hoverw.gif);
-
height: 20px;
-
color:#666666;
-
font: 11px Trebuchet MS,verdana, arial, sans serif;
-
text-indent: 30px;
-
height:17px;
-
}
-
-
#navcontainer .submain .navcontainersub {
-
background: url(../images/nav_sub_hover.gif);
-
}
-
-
/*------ Sub Nav ------*/
-
-
#navcontainer .submain .navcontainersub .current {
-
background: url(../images/nav_sub_hover_c.gif);
-
color:#FFFFFF;
-
}
-
-
#navcontainer .submain:hover .navcontainersub .current{
-
background: url(../images/nav_sub_hover_c.gif);
-
color:#666666;
-
}
-
-
-
.navcontainersub a {
-
background: url(../images/nav_sub_hover.gif);
-
display: block;
-
letter-spacing: -0.3px;
-
width: 171px;
-
padding-top: 5px;
-
height: 18px;
-
}
-
-
.navcontainersub a:link, .navcontainersub a:visited {
-
background: url(../images/nav_sub_hoverw.gif);
-
color:#666666;
-
text-decoration: none;
-
}
It basically makes the sub nav hover when you hover over the main section - check the link here in something better than IE6 PC to see what I mean...
LINK 
