Hey guys,

My dropdown menu is behaving kind of strange and I cannot seem to find a solution or what is causing it.

The menu is fine but when you hover over the sub menu items then the sub menu item div kind of drops down a couple of pixels.

Anyone know what is going on?

GREIndustries.co.za

Use these details to log in to the site:

User: temp
Pass: temp1234

Thanks in advance!

go to ato->add HTML/CSS Inserts->CSS Inserts and copy everything there to a text file and save the file.
next remove every thing that is there and look at the menu
is it acting funny? if the answer is no, then it is somethinig to do with the CSS Inserts so copy them in a bit at a time till you find out what is causing it.

Then you can say "I have this CSS xxxxxxx why is it causing this issue

Once again, great advice Juggledad...

I put the CSS back in one bit at a time and that allowed me to more easily eliminate the problem CSS..

It seems like I over-defined the size of the menu divs as I defined a height of 30px three times. As soon as I removed the second and third height property, everything was fixed!

I ended up with the following code for the styling of my menu:

.rMenu { 
	background-color: transparent !important;
}

div#menu1 { 
	height: 30px !important;  
	margin-top:0px; 
	background: url('/wp-content/themes/atahualpa/images/pagemenu-background.png') !important ;
}

ul.rMenu li a:link, 
ul.rMenu li a:visited, 
ul.rMenu li {
	background-color: transparent !important; 
	border-right: groove 2px #371d0b ;
}

ul.rMenu li a:hover, 
ul.rMenu li a:active {
	background: url("/wp-content/themes/atahualpa/images/pageitem-background.png") !important; 
}

Cheers!