I have with your guidance got my drop down menus working. I even figured out how to get a nice drop shadow happening. However I get the drop shadow occurring on each menu item as I mouse over which is undesirable. My question is how to mouse over and select menu items without the drop shadow effect inside the menu.
Dev site is here: http://wholehearted.heinrich.id.au/
Mousing on the retreat menu items should demonstrate the issue.
Menu code:
/* the bar across the screen and border */
#bfa_page_menu {border: solid 2px #000; background-color: #A50D12;}
#bfa_page_menu div#menu1 {border:solid 2px #A50D12;} /* removes the bar at either end of the menu*/
/* format the text */
ul.rMenu li a {
color:#fff!important; /* white */
font: 14px arial,helvetica,lucida sans !important;
}
/* and spread them out */
div#menu1 ul.rMenu li a {
padding-left: 35px;
padding-right: 35px;
}
/* submenu settings*/
#menu1 .rMenu-ver a {
line-height: 1.2em !important; /* This adjusts the height of items in the menu and submenu */
/* Shadow: 10px with blurrr*/
box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 10x 10px 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
}
---------------
experiments to date to control the box-shadow inside the menu:
/*test to eliminate popping inner shadow and retain the outer box shadow */
#menu1 ul.rMenu-ver .sub-menu {
box-shadow:none;
}
...and variations thereof. This of course just eliminates the box shadow completely.
I have considered disabling the hover in the submenu but haven't figured out the syntax.
I have reviewed the forum here as well as the a few CSS websites and peeked with Firebux to see whats going on. The answer is not apparent to me unfortunately.
Once again I appreciate any assistance.
Keith