Forums

lucaswynne

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 }

TheDoc

Only thing I can think of doing is this:

ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left:           10em; /* match ul width */
    top: -1px;
}

My eyes might be failing me at the moment, but that's really all I can see.

treehouse : what would you like to learn today?

Forums

One More Superfish Question