CSS Menus

[englishpremier]

just need quick bit of css help.

I'm trying to convert a site from a purely tables based layout to a purely CSS based layout, ready for importing into a contend managed system, probably Modx.

Here is the site's menu;

Here is what i actually want it to look like - with images that change colour on hover and selection.

Finally here is my code:


CSS

.menu {
font-family: arial, sans-serif; 
width:750px; 
height:25px; 
position:relative; 
font-size:11px; 
z-index:100;}

.menu ul li a, .menu ul li a:visited {
display:block; 
text-decoration:none; 
color:#000;
width:123px; 
height:20px; 
text-align:center; 
color:#fff; 
background:#007e3e; 
line-height:20px; 
font-size:11px; 
overflow:hidden;}

.menu ul {
padding:0; 
margin:0; 
list-style: none;
}

.menu ul li {
float:left; 
position:relative;
}

.menu ul li ul {
display: none;
}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#007e3e;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#007e3e; color:#ffffff;}
.menu ul li:hover ul li ul {display: none;}

.menu ul li:hover ul li a {
display:block; 
background:#6eac7d; 
color:#ffffff;
border: 1px solid #ffffff;
text-align:left;
}
.menu ul li:hover ul li a:hover {background:#007e3e; color:#ffffff;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}

HTML

<!-- Begin menu --->
<div class="menu">

<ul>
<li><a class="hide" href="#">HOME</a>

<!--[if lte IE 6]>
<a href="#">HOME
<table><tr><td>
<![endif]-->

	

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="#">PRODUCTS</a>

<!--[if lte IE 6]>
<a href="#">PRODUCTS
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="#" title="Interactive Feeding Guide">Interactive Feeding Guide</a></li>
	<li><a href="#" title="Products">Products</a></li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="#">STOCKISTS</a>

<!--[if lte IE 6]>
<a href="#">STOCKISTS
<table><tr><td>
<![endif]-->



</li>

<li><a class="hide" href="#">ADVICE</a>

<!--[if lte IE 6]>
<a href="#">ADVICE
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="#" title="FAQs">FAQs</a></li>
	<li><a href="#" title="Factsheets">Fact Sheets</a></li>
	<li><a href="#" title="Adult Feeding Guide">Adult Feeding Guide</a></li>
	<li><a href="#" title="Puppy Feeding Guide">Puppy Feeding Guide</a></li>
		</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../mozilla/index.html">NEWS</a>

<!--[if lte IE 6]>
<a href="#">NEWS
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="#" title="Curent News">Current News</a></li>
	<li><a href="#" title="Archive">Archive</a></li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="#">CONTACT</a>

<!--[if lte IE 6]>
<a href="#">CONTACT
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="#" title="Links">Links</a></li>
		</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>


</ul>

</div>

<!--- End menu -->

Can anyone tell me what changes I need to make to the code to achieve the same look as the first menu image?

Thanks

 

[englishpremier]

It looks likt example 4 does what I need kin of
http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

Ok looking at the CSS for that then - How would i modify it so that each menu item has a different background button?

.halfmoon{
margin-bottom: 1em;
}

.halfmoon ul{
padding: 3px 9px 2px 5px;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
border-bottom: 1px solid #929492;
}

.halfmoon li{
display: inline;
margin: 0;
}

.halfmoon li a{
text-decoration: none;
padding: 3px 9px 2px 5px;
margin: 0;
margin-right: 1px; /*distance between each tab*/
border-left: 1px solid gray;
color: black;
font-size: 13px;
background: #e5febc url(media/halfmoontab.gif) top right no-repeat;
}

.halfmoon li a:visited{
color: black;
}

.halfmoon li a:hover, .halfmoon li.selected a{
background-color: #c8e181;
}


/* ######### Style for Drop Down Menu ######### */

.dropmenudiv_e{
position:absolute;
top: 0;
border: 1px solid #657f27; /*THEME CHANGE HERE*/
border-width: 0 1px;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: #eff8d2;
width: 200px;
visibility: hidden;
}


.dropmenudiv_e a{
width: auto;
display: block;
text-indent: 5px;
border: 0 solid #657f27; /*THEME CHANGE HERE*/
border-bottom-width: 1px;
padding: 2px 0;
text-decoration: none;
color: black;
}

* html .dropmenudiv_e a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv_e a:hover{ /*THEME CHANGE HERE*/
background-color: #c8e181;
}

 

[englishpremier]

Definitely use modx. Its brilliant.

ah I see you're rossco from the Modx forums.

Im on there under another username. Think I pm'd you a while back about using FDM etc.. for multiuser blogs.

Anyway. I need a css dropdown menu that I can use with wayfinder, but it must look exactly the same as the first image I posted.

i'm not a webdesigner (in fact I'm a copywriter) but have been roped into doing this.

 

[englishpremier]

Ok someone else mentioned nav sprites does anyone have experience of those?