Абсолютное и относительное позиционирование в меню

У всех нас есть трудные времена с позиционированием абсолютных div: S В моем случае его горизонтальные подменю с этим css:

ul.children{
display:none;
position:absolute;
}
ul.children li{
position:relative;
height:60px;
float:none;
}
li.page_item_has_children:hover > ul.children{
display:inline;
}

введите здесь описание изображения

Как вы можете видеть на картинке, все подменю смещается влево на 50% ширины родителей... Я перепробовал все и создал еще больший беспорядок xD

Так что, если кто-то может помочь мне с этим, я буду очень благодарен :)

HTML:

<li class="page_item page-item-2 page_item_has_children">
    <a href="url">About</a>
    <ul class='children'>
        <li class="page_item page-item-39">
            <a href="url">About</a></li>
        <li class="page_item page-item-41">
            <a href="url">Contact us</a></li>
    </ul>
 </li>

Я не могу изменить html, потому что это тема WordPress: S


html css
person Morsus    schedule 06.02.2015    source источник
comment
Не могли бы вы опубликовать немного html?   -  person arnolds    schedule 06.02.2015
comment
У всех нас есть трудности с позиционированием абсолютных элементов div :S I - Нет. ;)   -  person GolezTrol    schedule 06.02.2015
comment
@Morsus Вы хотите, как это jsfiddle.net/10pxegb1   -  person rajesh    schedule 06.02.2015
comment
Я думал о добавлении margin-left:-xx px; но не все div имеют одинаковую ширину, поэтому некоторые из них будут в порядке, а некоторые будут перемещены снова.   -  person Morsus    schedule 06.02.2015
comment
@GolezTrol Я думал о нас, новичках :)   -  person Morsus    schedule 06.02.2015

Ответы (2)


arrow_upward
1
arrow_downward

Попробуйте что-то вроде этого:

ul {
  list-style-type: none;
  padding: 0;
}

.page_item_has_children {
  position: relative;
}

ul.children {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  min-width: 200px; /* or whatever makes sense */
}

ul.children li {
  height: 60px;
}

.page_item_has_children:hover > ul.children {
  display: block;
}

Здесь важно убедиться, что элемент page_item_has_children расположен относительно, а дочерний элемент ul — абсолютно.

JS-скрипт

person erier    schedule 06.02.2015
comment
Это самый близкий ответ на то, что я хочу. Все еще есть некоторые проблемы, когда дочерний текст длиннее родительского. - person Morsus; 06.02.2015
comment
Ты прав. В этом случае вам нужно просто выяснить, что имеет смысл для «min-width» «ul.children». 'ul.children' будет той же ширины, что и его родительский элемент, если вы не зададите минимальную ширину. Обновлен скрипт - person erier; 06.02.2015
comment
Чтобы быть тщательным, это не обязательно должно быть 'min-width'. Вы также можете просто использовать 'width'. - person erier; 06.02.2015

arrow_upward
1
arrow_downward

Обновить

ul.children {
  display: none;
}

ul.children li {
  position: relative;
  height: 60px;
  float: none;
}

li.page_item_has_children:hover > ul.children {
  display: inline;
}

li {
  float: left;
  list-style-type: none;
  width: 5em;
}
<ul>
  <li class="page_item page-item-2 page_item_has_children">
    <a href="url">About</a>
    <ul class='children'>
      <li class="page_item page-item-39">
        <a href="url">About</a></li>
      <li class="page_item page-item-41">
        <a href="url">Contact us</a></li>
    </ul>
  </li>
  
  <li class="page_item page-item-2 page_item_has_children">
    <a href="url">More info</a>
    <ul class='children'>
      <li class="page_item page-item-39">
        <a href="url">Item 1</a></li>
      <li class="page_item page-item-41">
        <a href="url">Item 2</a></li>
      <li class="page_item page-item-41">
        <a href="url">Item 3</a></li>
    </ul>
  </li>
</ul>

person Rick Hitchcock    schedule 06.02.2015
comment
Да, я пробовал это, если я удаляю абсолютную позицию, она растягивает ширину родительского div и перемещает все элементы меню вправо. - person Morsus; 06.02.2015
comment
Смотрите мое обновление. Трудно понять, что вызывает вашу проблему, не видя больше кода. Похоже, @erier указывает вам правильное направление. - person Rick Hitchcock; 06.02.2015
comment
Я вижу проблему. Добавьте этот стиль, чтобы предотвратить перенос ссылок: a {white-space: nowrap;} - person Rick Hitchcock; 06.02.2015
comment
О, это решило проблему, я просто добавил этот стиль в свой класс .menu li. Спасибо. :) - person Morsus; 06.02.2015
comment
Хороший звонок с пробелом, @RickHitchcock - person erier; 06.02.2015