I'm trying to get a 2px solid bar to appear below menu items on mouse over.
Below is my coding, but it's not working. Can anybody help?
Here's what I'm trying to duplicate: http://www.orchidorganics.com/mm5/merchant.mvc
Thanks!
Cway

/* ================================================ */
/* Page menu background                             */
/* ================================================ */
div#menu1 { 
	margin-top:0px;
}
/* ================================================ */
/* Page Menu item's background and border           */
/* ================================================ */
div#menu1 ul.rMenu {
	height: 28px;
	background: URL(http://www.orchidorganics.com/mm5/graphics/nav_bar_gradient_background.gif);
	border: none 0px; 
}
/* ================================================ */
/* Page Menu item                                   */
/* ================================================ */
ul.rMenu li a:link, 
ul.rMenu li a:hover, 
ul.rMenu li a:active, 
ul.rMenu li a:visited, 
ul.rMenu li {
	background: transparent !important;
	font-align: bottom;
	color: #666666 !important;
	margin-left: 16px;
	margin-right: 16px;
	margin-top: 2px;
	margin-bottom: 0px
}
ul.rMenu li a:hover {
    border-bottom: 2px #a3238e solid;
}
/* ================================================ */

Try rearranging the border shorthand as such. The order is supposed to be width, style, color.

ul.rMenu li a:hover {
    border-bottom: 2px solid #a3238e;
}

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

Those kinds of rules are why w3school.com can be so helpful.

Thanks for the quick help, guys!
I've made the changes, but it still isn't working.
New code:

ul.rMenu li a:link, 
ul.rMenu li a:visited, 
ul.rMenu li a:hover, 
ul.rMenu li a:active, 
ul.rMenu li {
	background: transparent !important;
	font-align: bottom;
	color: #666666 !important;
	margin-left: 16px;
	margin-right: 16px;
	margin-top: 2px;
	margin-bottom: 0px
}
ul.rMenu li a:hover {
    border-bottom: 2px solid #a3238e;
}

Would the margins be causing a problem?
Any other ideas?
Thanks!
Cway

Have you tried

border-bottom: 2px solid #a3238e !important;

You also may have to adjust the bottom padding as it looks like the border needs to be closer to the text.