CSS абсолютное / относительное позиционирование во всплывающем меню: как использовать только часть родительских свойств (слева, сверху, ширины, вертикальное / горизонтальное выравнивание)? - PullRequest
Новая
       9

CSS абсолютное / относительное позиционирование во всплывающем меню: как использовать только часть родительских свойств (слева, сверху, ширины, вертикальное / горизонтальное выравнивание)?

0 голосов
/ 08 октября 2018

Это проблема, с которой я довольно часто сталкиваюсь в последнее время в CSS.Предположим, у нас есть всплывающее меню где-то на странице, в котором есть элементы списка.Эти элементы списка имеют подменю, которые отображаются при наведении курсора.Поскольку я хочу, чтобы подменю появилось прямо под родительским элементом списка, я даю position:relative; родительскому элементу и position:absolute;top:0; подменю.До сих пор это прекрасно работает.

Однако из-за position:relative; теперь я потерял возможность сделать подменю 100% ширины страницы и использовать left:0; в том смысле, что подменю выровнено поочень левый страницы не родительского элемента.

Я хочу, чтобы каким-то образом было position:relative; на родительском элементе для вертикального выравнивания, но position:inherit; относительно горизонтального выравнивания.

См. Следующий пример - подменю правильно выровнены по вертикали, но должны начинаться с самого левого края по горизонтали: 

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

#my-menu-inner > ul {
  width:100%;
  background-color:yellow;
  list-style-type:none;
}

#my-menu-inner > ul > li {
  float:left;
  position:relative;
  padding:20px;
  border:1px solid black;
  margin:20px;
}

#my-menu-inner > ul > li > div.sub {
   position:absolute;
   top:60px;
   background-color:red;
   padding:40px;
   display:none;
   left:0;
   width:100vw;
}

#my-menu-inner > ul > li:hover > div.sub, #my-menu-inner > ul > li:focus > div.sub {
    display:block;
}
<div id="whatever">Just something before ...</div>
<div id="my-menu">
  <div id="my-menu-inner">
    <ul class="clearfix">
      <li>
        <span>foo</span>
        <div class="sub">
          <ul>
            <li>hello</li>
            <li>world</li>
          </ul>
        </div>
      </li>
      <li>
        <span>foo</span>
        <div class="sub">
          <ul>
            <li>please</li>
            <li>alignme</li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>

Как мне достичь того, что я хочу (пожалуйста, только чистый CSS, ответы с использованием JS не будут приняты)?

1 Ответ

0 голосов
/ 08 октября 2018

Сделать пункт меню позиционированным относительно ul, а не li: 

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

#my-menu-inner > ul {
  margin:10px;
  width:100%;
  background-color:yellow;
  list-style-type:none;
  position:relative;
}

#my-menu-inner > ul > li {
  float:left;
  padding:20px;
  border:1px solid black;
  margin:20px;
}

#my-menu-inner > ul > li > div.sub {
   position:absolute;
   top:calc(100%  - 20px);
   background-color:red;
   padding:40px;
   display:none;
   left:0;
   width:100vw;
}

#my-menu-inner > ul > li:hover > div.sub, #my-menu-inner > ul > li:focus > div.sub {
    display:block;
}
<div id="whatever">Just something before ...</div>
<div id="my-menu">
  <div id="my-menu-inner">
    <ul class="clearfix">
      <li>
        <span>foo</span>
        <div class="sub">
          <ul>
            <li>hello</li>
            <li>world</li>
          </ul>
        </div>
      </li>
      <li>
        <span>foo</span>
        <div class="sub">
          <ul>
            <li>please</li>
            <li>alignme</li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>
...