First, many thanks for the developers and supporter of Atahualpa. You folks are legends.

My problem: I am implementing a menu that's to span the entire centre block with each menu item evenly spaced out. No worries there. However the sub menus cause the top level menu to shift when accessed and I require it to be static.

My questions: how to access the sub menu without movement from the main menu, and for bonus points, can a drop shadow be added to the sub menu. I didn't choose the colours or design and I think a gentle drop shadow might help break up the red on red thing.

url to the development site: http://wholehearted.heinrich.id.au/

Software versions: Atahualpa 3.7.11, WordPress Version 3.5.1

ATO | Configure header area: %image %page-center

Code implemented:

/* 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;
font: 14px arial,helvetica,lucida sans !important;
}

/* and spread them out */

div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:visited,
div#menu1 ul.rMenu li a:active
{
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 submenus */
}

Many thanks in advance.

Keith

this code

div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover, 
div#menu1 ul.rMenu li a:visited, 
div#menu1 ul.rMenu li a:active {
    padding-left: 35px;
    padding-right: 35px;
}

well actually the 'div#menu1 ul.rMenu li a:hover' is the cause. Remember the 'C' is CSS stands for cascading so it applies to all it's children elements. If you don't want it to, you have to add more CSS to shut it off using a selector like 'div#menu1 ul.rMenu li ul li a:hover'

Well I'll be that's fixed it all right. Many thanks.

As an aside which is only because of my compulive tendencies...
Since all the a links are styled the same... This code...

div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover, 
div#menu1 ul.rMenu li a:visited, 
div#menu1 ul.rMenu li a:active {
    padding-left: 35px;
    padding-right: 35px;
}

Only needs to be this...

div#menu1 ul.rMenu li a {
    padding-left: 35px;
    padding-right: 35px;
}