title: How to center a superfish sub-menu under it's parent?
body: <p>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.</p>
  
  <p>My <a href="http://phpblog.inutritie.ro" rel="nofollow">website</a></p>
  
  <p>My menu css:</p>
  
  <pre><code>/* 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 }
  </code></pre>