[SOLVED] Drop down menus and drop shadows
 

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

don't put the shadow on the menu item (the '<a>') but it's parent

You sir are a legend.

Here's what was implemented:

/* submenu settings*/

#menu1 .rMenu-ver {
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);
}

Works as intended. Many thanks.

Well it has fixed the drop shadow issue but its broken the top menus moving around. I'll need to investigate further.

Its turned up another issue which I need to investigate. This topic can be closed. the solution is as per post 3.