How to make scroll bar drop with a down menu?

Menu Bar CSS question?

• The website is www.thewafflecabin.com In the Menu Bar section of the CSS, what would I change to make the menu bar links shifted to the left within the invisible box they're enclosed in. As you see, if you click on any of the links (in the menu bar), a broken lined box appears around it, and the links appear right in the middle of it. How would I make the links shifted to the left of these boxes? The reason I ask is because if you look under "Locations", I have that suckerfish dropdown menu (wordpress plugin), but the dropdown boxes don't drop right under the "L" in Locations from the start. The start of the drop down box starts exactly where that "invisible box" starts that encloses "Locations". So if I move over the "Locations" word to the beginning of that box, it will look more in order. What CSS command could take care of this? Thank you. -Brian

• Answer:

  You need to change the padding attribute in the CSS: http://thewafflecabin.com/wp-content/themes/autumn-almanac/style.css /***** HORIZONTAL MENU *****/ .menu {float: left; width: 996px; height: 30px; margin: 0 0 5px 0; padding: 0; display: inline; background: #999967 url(images/menu-bg.gif) repeat-x; border: #000000 2px solid; } .menu ul { width: 100%; margin: 10px; padding: 14px 0; list-style: none;} .menu ul li { display: inline; margin: 0; padding: 0 14px } .menu ul li a { padding: 0 0 0 14px; text-decoration: none; color: #660000; font-weight: normal; font-size: 1.5em; } .menu ul li a:hover { color: #cc9933; text-decoration: underline; } Four different values: padding: 0px 0px 0px 14px (top, right, bottom, left) Three different values: padding: 0px 0px 0px (top, right and left, bottom) Two different values: padding: 0px 0px (top and bottom, right and left) In your case you will be updating the following: .menu ul li { display: inline; margin: 0; padding: 0 14px } .menu ul li a { padding: 0 0 0 14px; text-decoration: none; color: #660000; font-weight: normal; font-size: 1.5em; } Change the left value of 14px to a lower number until it is located in the correct position. Stephen Williamson, Server Engineer, http://www.HostMySite.com?utm_source=bb