Помогите с позиционированием

Доброго времени суток, уважаемые пользователи форума.

Возникла трудность с позиционированием суб-меню:
в шаблоне wp base пытаюсь настроить выпадающую область меню так, чтобы она появлялась с левого края, и пункты в этой области тоже должны быть прилеплены к левому краю.
Вся загвоздка в том, что суб-меню позиционируется от пунктов меню и не может прилипнуть к краю без свойства position:fixed, но это не то, что нужно.

Помогите, пожалуйста.

Код стилей:

 .main-navigation {
    clear: both;
    display: block;
    float: left;
    width: 100%;
    border-top: 1px solid rgba(100, 105, 105, 0.1);
    border-bottom: 1px solid rgba(100, 105, 105, 0.1);
    margin-bottom: -1px;
  }
  .main-navigation ul {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
    text-align: center;
  }
  .main-navigation ul:after {
    width: 100%;
    display: block;
    content: "";
    margin-bottom: -5px;
    height: 5px;
    background: -webkit-radial-gradient(50% -3%, ellipse cover, rgba(0, 0, 0, 0.2), rgba(97, 97, 97, 0) 40%);
    background: radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0.2), rgba(97, 97, 97, 0) 80%);
  }
  .main-navigation ul li {
    *float: left;
    display: inline-block;
    position: relative;
  }
  .main-navigation ul li a {
    display: block;
    padding: 14px;
  }
  .main-navigation ul li:hover > ul,
  .main-navigation ul li.focus > ul {
    left: 0;
    right: auto;
  }
  .main-navigation ul ul {
  
    background:#000;
    width:auto;
    padding-top:2%;
    padding-bottom:5%;
    position: absolute;
    left: -999em;
    z-index: 99999;
    text-align: left;
    margin-top: 0;
    margin-left:0;
  }
  .main-navigation ul ul:after {
    content: none;
  }
  .main-navigation ul ul li:hover > ul,
  .main-navigation ul ul li.focus > ul {
    left: 100%;
    width: 100%;
    margin-top: 0;
  }
  .main-navigation ul ul li a {
    width: 200px;
    padding: 15px;
  }
  .main-navigation ul ul ul {
    left: -999em;
    top: 0;
  }
  .main-navigation ul ul .menu-item-has-children > a:after {
    font-family: 'simple-line-icons';
    content: "\e606";
    position: relative;
    float: right;
    opacity: 0.5;
    filter: alpha(opacity=50);
  }
  .menu-toggle {
    display: none;
  }
  .main-navigation ul {
 
    display: block;
  }

   .main-navigation .sub-menu li{display:table-row;width:400px;}
    .main-navigation .sub-menu {position:absolute;}
}

Пример сайта, с которого нужно содрать дизайн(меню по крайней мере):
joules.com