Question

我的网站上有一个超级鱼菜单。我试图找到一种方法来将子菜单置于其父级下面。右边没有子菜单左对齐。

我的菜单css：

/* Custom Styles */
.sf-menu { float:left }
/* 1st level links, no hover, no visits */
.sf-menu li {
    }
.sf-menu li a {
    color:#3E4245;
    line-height:18px;
    text-decoration:none; 
    text-shadow:0 1px 0 #fff;
    margin:0;
    padding:6px 12px; 
}
/* 1st level links, hover */
.sf-menu li a:hover {
    color: #7B9EBB
    }
/* 1st level links, while hovering over sub menu */
.sf-menu li.sfHover a {
    color:#7B9EBB
    }
/* 1st level current page */
.sf-menu .current-menu-item a {
    color: #7B9EBB;
    }
.sf-menu .current-menu-item { 
    background:#fefefe; 

    border: 1px solid #ddd;
    border-color: rgba(0,0,0,.15); 

    border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; 

    background: #f5f5f5;
    background: -moz-linear-gradient(100% 100% 90deg, #f5f5f5, #fff);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f5f5f5));

    -moz-box-shadow: 0 1px 1px rgba(0,0,0,.03);
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.03);
    box-shadow: 0 1px 1px rgba(0,0,0,.03);
    }
/* 1st level down triangles with pure css*/
.sf-menu li .sf-sub-indicator {

}

/* Drop-down */
.sf-menu li ul {
    background: #fff; margin:5px 0 0; padding:10px 0 0; position: absolute; left: -999em; width: 180px; border: 1px solid #e3e3e3; z-index:9999; 
    }
.sf-menu li ul, .sf-menu li ul ul {
    background: #FFF;
    border: 1px solid #e3e3e3;
    /* Border Radius */
    border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; 
    /* Box Shadow */
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,.03);
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.03);
    box-shadow: 0 2px 2px rgba(0,0,0,.03);  
    margin: 0; 
    padding:10px 0 0 0; 
    }
.sf-menu li ul ul { border-radius: 0 4px 4px 4px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
.sf-menu li ul ul {
    margin-top: -1px
    }
.sf-menu li li, .sf-menu li li li {
    border:0; 
    border-bottom: 1px solid #dedede
    }
.sf-menu li li:last-child, .sf-menu li li li:last-child {
    border-bottom: none
    }
.sf-menu li li a, .sf-menu li li li a { 
    padding: 8px 15px; 
    color: #666 !important; 
    font-size: 0.8em;
    }
.sf-menu li li a:hover, .sf-menu li li li a:hover { 
    font-weight: bold; 
    }
/* Drop-down Arrow */
.sf-menu li li:first-child { 
    background: url('../images/nav-indicator.png') no-repeat scroll center top transparent;
    margin-top: -18px;
    padding-top: 10px
    }
.sf-menu li li li:first-child { background: none }

Answer 1

我建议在你的superfish css文件的第29行使用负左参数。

    .sf-menu li#menu-item-34:hover ul,
    .sf-menu li#menu-item-34.sfHover ul {
      left: -48px;
    }


    .sf-menu li#menu-item-21:hover ul,
    .sf-menu li#menu-item-21.sfHover ul {
          left: -64px;
     }

    .sf-menu li#menu-item-20:hover ul,
    .sf-menu li#menu-item-20.sfHover ul {
          left:4px;
     }

Answer 2

在SUPERFISH JS onshow：

var $this = this.addClass(o.hoverClass),
$ul = $this.children(o.popUpSelector);

var mainbtn_w = this.width()/2;
var sub_w = $ul.width()/2;
$ul.css('left', "-"+(sub_w-mainbtn_w)+"px");

如何将superfish子菜单置于其父级下面？

2 个答案: