WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

The problem can be found here: http://themeforward.com/demo2/

Use my menu and navigate to Features > Shortcodes > Typography. Notice how the border ( ul .sub-menu { border:1px solid #000 } ) moves the third level menu item (typography) down one pixel. How do I get rid of that one pixel gap so that the third level menu item lines up correctly?

Here is my CSS:

/*** DEMO SKIN ***/
.sf-menu {
    float:          left;
    z-index: 900
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    color:          #FFF;
    padding:        10px;
.sf-menu li {
    z-index: 900
.sf-menu li li {
    z-index: 900;
.sf-menu li li li {
    background:     #FAFAFA;
    z-index: 900
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu li a:focus, .sf-menu li a:hover, .sf-menu li a:active {
    outline:        0;
    background: #EEE
.sf-menu > li:hover, .sf-menu > li.sfHover,
.sf-menu > li a:focus, .sf-menu > li a:hover, .sf-menu > li a:active {
    outline:        0;
    background: #AF1D21

.sf-menu .current-post-ancestor a, .sf-menu .current-menu parent a, .sf-menu .current-page-ancestor a, .sf-menf .current-category-ancestor a, .sf-menu .active_category a, .sf-menu .current-menu-item a { color:#1a1a1a }

ul .sub-menu { border:1px solid #000 }
ul li .sub-menu a { color:#262626!important }
ul li .sub-menu a:hover { background:#EEE!important }
share|improve this question

closed as off topic by Chip Bennett, Milo, kaiser, Wyck, Rarst Nov 21 '11 at 11:58

Questions on WordPress Development Stack Exchange are expected to relate to WordPress within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

This is a CSS question and not a WP question. :) – Brian Fegter Sep 16 '11 at 16:15
Depends if the current-post-ancestor classes are throwing it off at all. That's not basic CSS, it's related to the WP framework. Not sure though. This is kind of a gray area. – AndrettiMilas Sep 16 '11 at 16:27
this is entirely css. the ul is a child of an li with a border, so its content is inset the thickness of the border, just like any content in the parent li. – Milo Sep 16 '11 at 17:03
The classes are purely there for your convenience. The core doesn't have any CSS properties attached to those classes. The classes are blank slates. :) – Brian Fegter Sep 16 '11 at 17:26
I understand how that part of the CSS works... and that's why it isn't making any sense that it gets bumped down by 1 pixel. – AndrettiMilas Sep 16 '11 at 18:08
up vote 0 down vote accepted

Though this isn't a WP question, you can use the following CSS to get that third level menu to align properly.

.sf-menu li li li{

Hope this helps.

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.