Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

[SOLVED] Drop down menus and drop shadows


  #1  
Old Jun 5, 2013, 12:54 AM
keith_h
 
21 posts · Jun 2013
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
  #2  
Old Jun 5, 2013, 04:19 AM
juggledad's Avatar
juggledad
 
23,672 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
don't put the shadow on the menu item (the '<a>') but it's parent
  #3  
Old Jun 5, 2013, 05:35 AM
keith_h
 
21 posts · Jun 2013
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.
  #4  
Old Jun 5, 2013, 06:27 AM
keith_h
 
21 posts · Jun 2013
Well it has fixed the drop shadow issue but its broken the top menus moving around. I'll need to investigate further.

Last edited by keith_h; Jun 5, 2013 at 06:30 AM.
  #5  
Old Jun 5, 2013, 06:33 AM
keith_h
 
21 posts · Jun 2013
Its turned up another issue which I need to investigate. This topic can be closed. the solution is as per post 3.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] *Help* My drop down menus are overlapping each other when they &quot;drop down&quot; famecherry Page & Category Menu Bars 6 Feb 21, 2011 09:52 AM
[SOLVED] drop down menus drop straight down 49erEric Page & Category Menu Bars 2 Aug 23, 2010 10:10 AM
Drop Down Menus - Creating eager to learn Header configuration & styling 3 May 19, 2010 03:42 PM
IE 8 and the DROP DOWN / FLY OUT MENUS romenov Atahualpa 3 Wordpress theme 0 Dec 12, 2009 12:53 PM


All times are GMT -6. The time now is 03:59 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.