Hi,

I created a nav bar with different color in each button on the roll-over state.

Here are the images so you can see how is the nature of the navigation bar.

http://www.sunnyspell.com/navbar/index.html

The problem is that when I roll-over on the About us or Participation & training the state of the button is the correct but when I go down to the dropdown submenus the state of the About us button goes back to normal state and I need it to stay in the rollover state while I am going down to the other buttons.

I hope is clear.

Alex

Here in my CSS for the colores nav bar:

/* =Menu coloured buttons
-------------------------------------------------------------------------------*/

#main_nav {
   	display: block;
   	float: right;
	margin: 10px 40px 0 0;
	font-family: Helvetica, sans-serif;

}

#main_nav li { 
	float: left; 
	background: #f6f6f6;
	border: 1px solid #ebebeb;
	list-style-type: none;
}

#main_nav li:hover { 
	position: relative;

}

#main_nav li a {
    	color: #333;
    	font-weight: bold;
	font-size: 15px;
   	text-decoration: none;
   	padding: 9px 15px 9px 15px;
    	display: block;
	-moz-transition:background-color .1s ease-in;
	-webkit-transition:background-color .1s ease-in;
	-o-transition:background-color .1s ease-in;
	transition:background-color .1s ease-in;
}

#main_nav .home a:hover {
	color: #fff;
	background: #cccc33;
	-moz-transition:background-color .1s ease-in;
	-webkit-transition:background-color .1s ease-in;
	-o-transition:background-color .1s ease-in;
	transition:background-color .1s ease-in;

}

#main_nav .about a:hover {
	color: #fff;
	background: #33cccc;
	-moz-transition:background-color .1s ease-in;
	-webkit-transition:background-color .1s ease-in;
	-o-transition:background-color .1s ease-in;
	transition:background-color .1s ease-in;
}

#main_nav .participation a:hover {
	color: #fff;
	background: #ff6600;
	-moz-transition:background-color .1s ease-in;
	-webkit-transition:background-color .1s ease-in;
	-o-transition:background-color .1s ease-in;
	transition:background-color .1s ease-in;
}

#main_nav .news a:hover {
	color: #fff;
	background: #ffcc00;
	-moz-transition:background-color .1s ease-in;
	-webkit-transition:background-color .1s ease-in;
	-o-transition:background-color .1s ease-in;
	transition:background-color .1s ease-in;
}

#main_nav .shop a:hover {
	color: #fff;
	background: #cccc33;
	-moz-transition:background-color .1s ease-in;
	-webkit-transition:background-color .1s ease-in;
	-o-transition:background-color .1s ease-in;
	transition:background-color .1s ease-in;
}

#main_nav .contact a:hover {
	color: #fff;
	background: #33cccc;
	-moz-transition:background-color .1s ease-in;
	-webkit-transition:background-color .1s ease-in;
	-o-transition:background-color .1s ease-in;
	transition:background-color .1s ease-in;
}