[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.
|
All times are GMT -6. The time now is 10:53 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.