Центральное подменю под родительскими элементами списка с переменной шириной - PullRequest
Новая
       15

Центральное подменю под родительскими элементами списка с переменной шириной

3 голосов
/ 24 февраля 2012

Извините, я не могу разместить этот код где-либо в данный момент, но, надеюсь, скриншоты помогут. Я пытаюсь точно расположить подменю ul под li переменной ширины, например:

Centered submenu

Вот урезанная версия моего макета: 

<div class="nav">
  <ul class="menu">
     <li>
          <a href="">Home</a>  
     </li>
     <li>
          <a href="">Kids</a>
          <ul class="sub-menu">
              <li><a href="">Sub-item 1</a></li>
              <li><a href="">Sub-item 2</a></li>
          </ul>
     </li>
     <li>
          <a href="">Students</a>  
     </li>        
     <li>
          <a href="">Adults</a>
          <ul class="sub-menu">
              <li><a href="">Sub-item 1</a></li>
              <li><a href="">Sub-item 2</a></li>
          </ul
     </li>
  </ul>
</div>

У меня есть стрелка в подменю, работающая и выровненная по центру подменю ul, но само подменю не выравнивается правильно с его родительским li, как вы можете видеть здесь. Показанные подменю предназначены для li для детей и li для взрослых, как указано выше:

Current state of affairs

Это соответствующий код, я полагаю. Любая помощь приветствуется! 

.menu li {
    display:inline-block;
    list-style-type: none;
    position: relative;
}

.menu li a {
    background:url("_/images/nav-cross-home.png") 50% 5px no-repeat;
    display:inline-block;
    padding:30px 5px 2px;
    text-transform: uppercase;
    text-decoration: none;
    color:#000;
    font-family:proxima-nova, Arial, Helvetica, sans-serif;
    font-weight:700;
    font-size:.9em;
    margin: 0 auto 10px;
}
.nav ul ul {
    display: block;
    position: absolute;
    margin: 10px 0px 0px -15px;
    top: 3.333em;
    left: -125%;
    width: 170px;
    z-index: 99999;
    border:2px solid #929292;
}

.nav ul.menu ul.sub-menu a {
    background: #fff !important;
    border-bottom: 1px solid #e5e5e5;
    color: #444;
    font-size: .9em;
    text-transform: none;
    height: auto;
    line-height: 1.4em;
    padding: 10px 10px;
    width: 150px;
    margin-bottom:0px;
}

1 Ответ

13 голосов
/ 24 февраля 2012

Вот, пожалуйста. 

.nav ul ul {
    margin-left:-87px;
    left: 50%;
}

Таким образом, оставшиеся 50% получают ul к средней точке родительского li, а затем отрицательный левый край, равный половине общей ширины (включая border = 174).

Обновление: вот пример. http://jsfiddle.net/mcpatriot/jzWcD/

...