Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 305
  • Last Modified:

problem with margins on submenu

http://www.plushdesign.net/bbrox/?page_id=81

i can't get the submenu text of the current page item to line up with its parent text. if you are on a page that has a dropdown, the submenu items are shifted to the right 5px. the positioning on hover is fine, as is for the other submenus. i have tried changing every combination but then fix one spot only to have the positioning shift in another (either the submenu list items or the green background box). i am sure it is something obvious, although it seems that it should be something limited to the current-menu-item of the second level in order not to impact the rest of the nav.

*sigh*  thank you.

ps: there is a rule at the end of the style sheet that was given to me by Builder tech support to try, which appeared to do nothing. it is—  .builder-module-navigation li li a:hover {padding: 0 15px;}  

/*** rule for current page item, first level ***/
.menu li.current-menu-item a,
.memu li.current_page_item a {
padding: 0px 10px;
margin: 0px 0px 0px 0px;
text-transform: uppercase;
font-weight: bold;
font-size: 1.1em;
line-height: 35px;
vertical-align: middle;
text-decoration: none;
height: 35px;
color: #fff;  !important;
background-image: url(images2/nav_lite.png);
background-repeat: repeat-x;
background-position: left top;
}
/******************* second level stuff *****************/
.builder-module-navigation li ul {  /*dropdown list (block)*/
width: 15em;
text-align: left;
margin: 0px 0px 5px 0px;
background: transparent;
border-left: 1px solid #C2D8D8;
border-right: 1px solid #C2D8D8;
}
.builder-module-navigation li li {  /*dropdown items (words)*/
width: 15em;
background-image: none;
background-color: #CAECA2 !important;
margin: 0 0px 0 0px;
padding: 0;
color: #666 !important;;
font-weight: normal !important;
}

/*** rule for current page item, second level ***/

.builder-module-navigation li li a,  
.builder-module-navigation li li.current_page_item a,
.builder-module-navigation li li.current-cat a {  /*current page item*/
background: #transparent;
color: #666 !important;
margin: 0 0px 0 0px;
border: none;
border-bottom: 1px solid #C2D8D8;
font-weight: normal !important;
background-image: none !important;
}
.builder-module-navigation li li a:hover {
background-color: #E5F9CB !important;
color: #ccc !important;
margin: 0;
padding: 0 0px 0 10px;
font-weight: normal !important;
display: block;
 screenshot describing problem
0
judyhicks
Asked:
judyhicks
1 Solution
 
HagayMandelCommented:
In .menu li.current-menu-item a, .memu li.current_page_item a (line 312 in style.css remove the padding-left 10px.
0
 
LZ1Commented:
You'll have to create a CSS class for that part of the sub-menu.  The padding is pushing it over to the right by about 5px.  

Try this:
ul#menu-main li.menu-item ul.sub-menu li.menu-item a{padding-left:10px;}

Open in new window

0
 
judyhicksAuthor Commented:
thank you!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now