Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Superfish menu doesn’t show IE. Please help.

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #40780
    apastalas
    Participant

    I puted superfish meniu on a website, on Firefox and Chrome works graet, but not on Opera and IE 9. Here is the CSS code:

    /*** ESSENTIAL STYLES ***/
    .sf-menu, .sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    .sf-menu {
    line-height: 1.0;
    margin:24px 0 0 8px !important
    }
    .sf-menu ul {
    position: absolute;
    top: -999em;
    width: 216px; /* left offset of submenus need to match (see below) */
    }
    .sf-menu ul li {
    width: 100%;
    }
    .sf-menu li:hover {
    visibility: inherit; /* fixes IE7 ‘sticky bug’ */
    }
    .sf-menu li {
    float: left;
    position: relative;
    }
    .sf-menu a {
    display: block;
    position: relative;
    }
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
    left: 25px;
    top: 86px; /* match top ul list item height */
    z-index: 99;
    }
    ul.sf-menu li:hover li ul,
    ul.sf-menu li.sfHover li ul {
    top: -999em;
    }
    ul.sf-menu li li:hover ul,
    ul.sf-menu li li.sfHover ul {
    left: 215px; /* match ul width */
    top: 0;
    }
    ul.sf-menu li li:hover li ul,
    ul.sf-menu li li.sfHover li ul {
    top: -999em;
    }
    ul.sf-menu li li li:hover ul,
    ul.sf-menu li li li.sfHover ul {
    left: 10em; /* match ul width */
    top: 0;
    }

    /*** DEMO SKIN ***/
    .sf-menu {
    float: left;
    margin:0;
    padding:0
    }
    .sf-menu > li > a {
    padding: 0 0 0;
    text-align:center;
    text-decoration:none;
    font-weight:normal;
    font-size:28px;
    text-transform:none;
    color:#cae6ba;
    padding:33px 70px 21px 41px;
    font-family:Tahoma, ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
    }
    .sf-menu ul a{
    text-decoration:none;
    font-size:12px;
    font-weight:bold
    }
    .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
    color: #fff;
    }

    .sf-menu li {
    background: url(../images/menu_bgs.png) no-repeat ;
    }
    .sf-menu li ul {
    width:221px;
    background:#385740;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    padding:10px 0;
    }
    .sf-menu li li {
    width:221px;
    background:#385740;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    padding:0;
    }
    .sf-menu li li a {
    background: none !important;
    width:190px !important;
    padding:11px 0 13px 25px !important
    }
    .sf-menu li li a:hover, .sf-menu ul li.last-child a:hover, .sf-menu li li#current a{
    background:#779755 !important;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    margin:0 10px;
    color:#fffda5

    }
    .sf-menu li li li {
    background: #;
    }

    .sf-menu li:first-child, .sf-menu li.first-child {
    }
    .parent li:first-child a, .parent li.first-child a {
    }

    .sf-menu li:last-child, .sf-menu li.last-child {
    }
    .sf-menu li:last-child > a, .sf-menu li.last-child a {
    }

    .sf-menu li a:hover {
    outline: 0;
    }

    .sf-menu li .separator {
    display: block;
    text-decoration:none;
    }

    /*** arrows **/
    .sf-menu a.sf-with-ul {
    padding-right: 0s;
    min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
    }
    .sf-sub-indicator {
    position: absolute;
    display: block;
    right: 1.5em;
    width: 5px;
    height: 3px;
    text-indent: -999em;
    overflow: hidden;
    }
    a > .sf-sub-indicator { /* give all except IE6 the correct values */
    top: 30px;
    background-position: 0 0; /* use translucent arrow for modern browsers*/
    }
    /* apply hovers to modern browsers */
    a:focus > .sf-sub-indicator,
    a:hover > .sf-sub-indicator,
    a:active > .sf-sub-indicator,
    li:hover > a > .sf-sub-indicator,
    li.sfHover > a > .sf-sub-indicator {
    background-position: 0px 0px; /* arrow hovers for modern browsers*/
    }

    /* point right for anchors in subs */
    .sf-menu ul .sf-sub-indicator { top:16px }
    .sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
    /* apply hovers to modern browsers */
    .sf-menu ul a:focus > .sf-sub-indicator,
    .sf-menu ul a:hover > .sf-sub-indicator,
    .sf-menu ul a:active > .sf-sub-indicator,
    .sf-menu ul li:hover > a > .sf-sub-indicator,
    .sf-menu ul li.sfHover > a > .sf-sub-indicator {
    top:16px /* arrow hovers for modern browsers*/
    }

    /*** shadows for all but IE6 ***/
    .sf-shadow ul {
    padding: 0 8px 9px 0;
    }
    .sf-shadow ul.sf-shadow-off {
    background: transparent;
    }

    .sf-menu .active>a {
    color:#000
    }
    .sf-menu a:hover {
    color:#000;
    }

    .sf-menu #current>a {
    color:#000;
    }

    .superfish_clear {
    clear: both !important;
    height: 1px !important;
    overflow: hidden !important;
    font-size: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    }

    #114204
    Paulie_D
    Member

    That code is WAY too much for us to interpret.

    Either provide us with a link to a live site or create something in Codepen.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.