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;
text-decoration:none
}
.sf-menu li {
margin-right:35px;
z-index: 900
}
.sf-menu li li {
z-index: 900;
background:#FAFAFA
}
.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 }
