如何将超级鱼子菜单置于其父菜单的中心？答案

【问题标题】：How to center a superfish sub-menu under it's parent?如何将超级鱼子菜单置于其父菜单的中心？
【发布时间】：2013-10-10 19:18:47
【问题描述】：

我的网站上有一个超级鱼菜单。我正在尝试找到一种方法将子菜单置于其父级下方。右不是子菜单左对齐。

我的website

我的菜单 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 }

【问题讨论】：

标签： css menu superfish

【解决方案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;
     }

【讨论】：

我已经应用了它，但它适用于“文章”子菜单，其他子菜单向左移动越来越多。看看现场直播
您是否可以在其他两个下拉菜单中添加自定义类？如果可以的话，您可以在您的样式中以这种方式定位它们，并且每个都具有不同的左侧属性。 :}
它是一个 wordpress 菜单，不能添加任何东西。我很确定这是可以做到的，因为我在一个类似的主题中看到过它
看看他们在做什么！ ;} F12 是你的朋友。
你也可以使用伪选择器来定位它们，但它不适用于旧版本的 IE。

【解决方案2】：

在 SUPERFISH JS 上展示：

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");

【讨论】：