CSS Active Menu Items

Did you try a search?

http://www.csscreator.com/css-forum/ftopic12672.html

Thanks for the thread link. Almost what I was after but the menu items weren't in a list and the background, etc needed a bit of jiggery pokery.

My version of CSS Active Item List can be seen here:

http://tinyurl.com/gebfp

slip

ok it works fine on its own but I'm having a few probs linking it up in my existing layout...

I've pretty much used the same coding as my previous example but for some reason I have two areas: the actual link area and the outer "button" area (created by the padding). The background arrow is being placed at the bg of the link area and underneath the list item word.

The attached diagram explains this a bit more with the two red outlines showing the different zones.

How can I get rid of the inner link area so that it will place the background as shown in my previous link example?

The code is as follows:

CSS:

/* Menu Styles
-------------------------------------- */
#menu ul {
	clear:left;
	width: 820px;
	margin-top: 10px; /* why IE adds 1px here is beyond me. */	
	padding-top: 10px;
	list-style: none;
}

#menu ul li {
	float: left;	/* To allow search box to fit on the right */
	padding: 8px 15px;
	margin: 0;
	display: inline;
	text-decoration: none;	
	font-size: 14px;
}

/* Eliminate the margin (and/or border if using seperators) on the left of the first item */
#menu ul li.first {
	margin-left: 0;
	border-left: none;
	list-style: none;
	display: inline;
}

#menu a:link, a:visited {
   	text-decoration: none;
   	margin-left: -4px;
   	color: #000;
}

#menu a:hover, a:active:focus { 
	background: url(../images/menu_active.gif) right center no-repeat;
}

/* body style applied to each page which sets which link is "active" */
#home a#home, 
#archives a#archives, 
#about a#about, 
#links a#links, 
#contact a#contact {
	background: url(../images/menu_active.gif) right center no-repeat;
   	text-decoration: none;
}

XHTML:

<div>
			<ul>
				<li><a>Home</a></li>
				<li><a>Archives</a></li>
				<li><a>About</a></li>
				<li><a>Links</a></li>
				<li><a>Contact</a></li>
			</ul>
		</div>

Bear in mind that the other bits of code are for the rest of the layour of my page.

** the <div> container in the XHTML code is meant to be:

div id="menu"

For some reason the id is removed when I paste it into the code block above....(??)

Thanks

ok scratch that. I've been working too long today me thinks...

It was simply a case of changing:

#menu ul li {

to

#menu ul li a {

Works fine now