Устанавливаем ширину абсолютно позиционированного блока относительно его родителя

HTML верстка часто требует использования вложенных элементов с абсолютным позиционированием. Такое, например, часто приходится делать при верстке навигации с выпадающими элементами.

Приведем простой пример:

<ul id="mainNav">
  <li>
    <a href="#">Nav2</a>
    <ul class="hide">
      <li><a href="#">Subnav1</a></li>
      <li><a href="#">Subnav2</a></li>
      <li><a href="#">Subnav3</a></li>
    </ul>
  </li>
  <li><a href="#">Nav3</a></li>
</ul>

Стили для такого фрагмента могут выглядеть примерно так:

#mainNav         {  }
  #mainNav>li    { position:relative; }
  #mainNav>li>ul { display:none; position:absolute; top:30px; left:0; }

Однако, как видно из примера разметки, вложенный и абсолютно спозиционированный список должен будет унаследовать от своего родителя ширину. Результатом этого станет неэстетичный перенос строк в выпадающем меню, нарушающий юзабилити сайта. Решить эту проблему можно, очевидно, несколькими путями. Самым простым мне кажется способ с использованием атрибута white-space. Для этого добавим этот атрибут в стиль элементов вложенного списка:

#mainNav            {  }
  #mainNav>li       { position:relative; }
  #mainNav>li>ul    { display:none; position:absolute; top:30px; left:0; }
  #mainNav>li>ul>li { white-space:nowrap; }

Если вложенные элементы окажутся у вас слишком короткими, добавьте:

min-width:100%;

для всего списка. Трюк с white-space работает во всех современных браузерах, а также в IE7 и выше.

Заинтересовались? Звоните нам по телефонам +375 (29) 774-35-89 и +375 (44) 774-35-89 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.