Grow your CSS skills. Land your dream job.

One More Superfish Question

  • # September 16, 2011 at 12:25 pm

    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 }
    # September 16, 2011 at 5:38 pm

    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.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".