Padding issue with page menu

rpfray · #1 Dec 26, 2011, 07:57 AM

Hi,

I'd be very appreciative if anyone could help me out here. I'm having trouble getting the padding right on my page menu.

It's working just how I want it on the one link without an expand-down arrow, but the links that do have an expand-down arrow lose the padding to the right of the arrow.

The URL is: http://www.hummingbirdsusa.com/. It's very much a work in progress.

I'm using the following CSS insert:

Code:

#menu1 ul.rMenu-hor,
#menu1 ul.rMenu-ver {
  padding-left: 0px !important;
}

#menu1 ul.rMenu-ver {
  margin-top: 0 !important;
}

#menu1 .rMenu-hor a {
  font-weight: bold !important;
  padding-left: 25px !important;
  padding-right: 25px !important;
  line-height: 20px !important;
}

#menu1 .rMenu-ver a {
  margin-top: 0 !important;
  line-height: 1.2em !important;
  font-weight: normal !important;
  font-size: 13px !important;
  border-top: solid 1px #BBBBBB !important;
  border-bottom: solid 1px #333333 !important;
  border-left: solid 1px #BBBBBB !important;
  border-right: solid 1px #333333 !important;
  padding-left: 7px !important;
}

I've tried many combinations of adding padding to various elements, but nothing I've tried has worked. Any ideas?

Thanks

juggledad · #2 Dec 26, 2011, 08:26 AM

try using

HTML Code:

div#menu1 ul.rMenu li.rMenu-expand a

instead of

HTML Code:

#menu1 .rMenu-ver a

lmilesw · #3 Dec 26, 2011, 08:56 AM

Because the arrow is a background image I would probably just edit the image so there is more space on the right.