[nbarten]

Hi all,

I am creating a vertical menu, and if a menu item has submenu items, it will slide open when the user clicks on it. I also have set in the css that when someone hovers a LI element, it'll change the background to white:

HTML:

<div id="navigation">
			<h1>Overview</h1>
			<br />
			
			<ul class="main">
				<li><span>Test 1</span></li>
				<li><span>Test 2</span></li>
				<li><span>Test 3</span>
					<ul class="sub">
						<li><span>Test 3A</span></li>
						<li><span>Test 3B</span></li>
					</ul>
				</li>
			</ul>
		</div>

CSS:

#navigation li
{
	list-style: none;
}

#navigation ul.main li
{
	color: #666;
	font-weight: bold;
	display: block;
	
	padding-top: 5px;
	padding-bottom: 5px;
}

#navigation ul.main li span
{
	padding-left: 20px;
	padding-right: 10px;
}

#navigation ul.main li:hover
{
	background: #FFFFFF;
}

So the user clicks on 'Test 3', and the 2 submenu items will show below it. The problem now is, when he hovers over 'Test 3', 'Test 3A' or 'Test 3B', not only the hovered LI element's background color changes, but all other items of 'Test 3'. This because the subitems are naturally nested inside the first LI element.

Is it possible in CSS to have only the hovered LI element bgcolor change? Or do i have to resort to javascript/jquery?


thanks

This post has been edited by nbarten: 18 August 2012 - 06:11 AM

[Glorfindal]

Watch this video:

It's a good tutorial. However they use CSS3 in it so I don't know if that is not what you want or not.
http://www.youtube.c...hs&feature=plcp

This post has been edited by Glorfindal: 18 August 2012 - 09:13 AM