Поддержка Темы и шаблоны Помогите с позиционированием

  • Доброго времени суток, уважаемые пользователи форума.
    Возникла трудность с позиционированием суб-меню:
    в шаблоне 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

Просмотр 4 ответов — с 1 по 4 (всего 4)
Просмотр 4 ответов — с 1 по 4 (всего 4)
  • Тема «Помогите с позиционированием» закрыта для новых ответов.