1 Replies - 980 Views - Last Post: 18 August 2012 - 08:47 AM

#1 nbarten   User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 162
  • Joined: 30-April 07

Changing only submenu item

Posted 18 August 2012 - 06:11 AM

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:

<div id="navigation">
			<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>

#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?


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

Is This A Good Question/Topic? 0
  • +

Replies To: Changing only submenu item

#2 Glorfindal   User is offline

  • Java Enthusiast
  • member icon

Reputation: 37
  • View blog
  • Posts: 606
  • Joined: 31-December 08

Re: Changing only submenu item

Posted 18 August 2012 - 08:47 AM

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.

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

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1