0

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 }

2 Answers 2

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;
     }
8
  • 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, 2012 at 3: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. :} Jun 28, 2012 at 3: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, 2012 at 3:58
  • Take a look at what they're doing! ;} F12 is your friend. Jun 28, 2012 at 3:58
  • You could also use pseudo selectors to target those, but it wouldn't work in older versions of IE. Jun 28, 2012 at 3:59
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");

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.