How to center a superfish sub-menu under it's parent?

Question

I have a superfish menu on my site. I am trying to find a way to center the sub-menu under it's parent. Right not the sub-menu is aligned left.

My website

My menu 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 }

Christopher Marshall · Accepted Answer · 2012-06-28T04:08:39.723

0

I would suggest using a negative left parameter on line 29 of your superfish css file.

    .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;
     }

edited Jun 28 '12 at 04:08

answered Jun 28 '12 at 03:49

Christopher Marshall

10,678
10
55
94

I have applied it, but it works for "articole" sub-menu, other subm enus are shifted left more and more. Take a look at the site live – webmasters Jun 28 '12 at 03:54
Are you able to add a custom class to the other two drop downs? If you can, you can target them that way in your styles and just have a different left attribute for each. :} – Christopher Marshall Jun 28 '12 at 03:55
its a wordpress menu, can't add anything.And I am pretty sure this can be done since I have seen it in a simillar theme – webmasters Jun 28 '12 at 03:58
Take a look at what they're doing! ;} F12 is your friend. – Christopher Marshall Jun 28 '12 at 03:58
You could also use pseudo selectors to target those, but it wouldn't work in older versions of IE. – Christopher Marshall Jun 28 '12 at 03:59
Please tell me more, Im pretty sure no one uses IE6 or 7 – webmasters Jun 28 '12 at 04:01
Actually, since those li's have ID's, should be able to target the other sub-navs (as long as those ID's do not change). Give me a sec and I'll update the answer. – Christopher Marshall Jun 28 '12 at 04:02
Updated. Be aware that if the widths of the sub-menus differ, may have to tweak the positioning. Go ahead and paste that in after line 29. – Christopher Marshall Jun 28 '12 at 04:09

score 0 · Answer 2 · answered Oct 10 '13 at 11:18

0

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

answered Oct 10 '13 at 11:18

Bluego78

11
4

How to center a superfish sub-menu under it's parent?

2 Answers2