Tab menu using css active help

[treelovinhippie]

hi

I've got a CSS tab menu, but I would like the hover effect to stick when the page is active. i.e. if on the homepage, the "Home" tab will have the hover effect.

The code I have doesn't seem to be doing the job sadly...

HTML:

		<div id="horiz-menu" class="splitmenu">
							<ul class="mainlevel">
<li><a href="/">Home</a></li>
<li><a href="?L=users.desktop">Desktop</a></li>
<li><a href="?L=contacts.contacts">My Contacts</a></li>
<li><a href="?L=search.users">Search</a></li>
<li><a href="?L=blogs.browse">Blogs</a></li>
<li><a href="?L=chat.chat">Chat</a></li>
<li><a href="?L=inkspot.index">Inkspot</a></li>
<li><a href="?L=video.browse">Videos</a></li>

</ul>
				
		</div>

CSS:

div#horiz-menu a,
div#horiz-menu li.active li a {
	color: #fff;
}

div#horiz-menu li:hover,
div#horiz-menu li.sfHover,
div#horiz-menu li.active:hover,
div#horiz-menu li.active.sfHover {
	background: url(../images/frame/menu2-r.png) 100% 0 no-repeat;
}

div#horiz-menu li:hover a,
div#horiz-menu li.sfHover a,
div#horiz-menu li.active:hover a,
div#horiz-menu li.active.sfHover a {
	background: url(../images/frame/menu2-l.png) 0 0 no-repeat;
	color: #fff;
}

#horiz-menu li.active,
#horiz-menu li.active_menu {
	background: url(../images/frame/menu-r.png) 100% 0 no-repeat;
}

#horiz-menu li.active a,
#horiz-menu li.active_menu a {
	background: url(../images/frame/menu-l.png) 0 0 no-repeat;
	color: #407D91;
}

#horiz-menu li.active li.active,
#horiz-menu li.active li.active a {
	background: none;
}


#horiz-menu li:hover li:hover,
#horiz-menu li.sfHover li.sfHover,
#horiz-menu li.active li.active {
	background: #453927;
}

Any help would be awesome

thanks!

[KDLA]

I believe you'll need to add some javascripting which determines the page, then applies the style.

KDLA