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.

try it like this

ul.rMenu li a:link, 
ul.rMenu li a:visited {
	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;
	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: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
}

hover didn't work. I put !important in the border-bottom hover and the colored bar appeared on mouse-over, but the page jumps around now when you hover.

And the colored bar below the link is below the black rule/line, too.

How about adding padding as below?

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

That did the trick!
Below is the complete coding.
Let me know if any of it can be streamlined or cleaned-up.
Thanks, juggledad and lmilesw!
Cway

/* Page Menu item                                   */
/* ================================================ */

ul.rMenu li a:link, 
ul.rMenu li a:visited {
	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 !important;
	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: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;
background: transparent !important;
font-align: bottom;
color: #666666 !important;
margin-left: 16px;
margin-right: 16px;
margin-top: 2px;
margin-bottom: 0px;
padding-bottom: 1px !important;
}
/* ================================================ */