Позиционирование в CSS, мне нужны централизованные выпадающие опции, но с отступом слева - PullRequest
Новая
       34

Позиционирование в CSS, мне нужны централизованные выпадающие опции, но с отступом слева

0 голосов
/ 07 ноября 2019

Ниже HTML требуется подходящий CSS, чтобы раскрывающиеся ссылки были центральными, но с отступом. Просмотр скрипки. https://jsfiddle.net/peteraejnrdev/865h2tvu/2/#&togetherjs=d3VifH4hc3

<div class="header-dropdown-menu">
      <ul class="top-nav">
          <li class="top-menu-nav"><a href="#">Menu</a>
            <ul class="sub-nav">
              <li><a href="#">wood Type</a></li>
              <li><a href="#">News</a></li>
              <li><a href="#">Specification</a></li>
              <li><a href="#">Pricing</a></li>
              <li><a href="#">Images</a></li>
              <li><a href="#">FAQ</a></li>
            </ul>
          </li>
        </ul>
      </div>

Ответы [ 2 ]

0 голосов
/ 07 ноября 2019

Если моя интерпретация верна, вы можете сделать что-то вроде этого: 

.header-dropdown-menu {
  position: relative;
  display: inline-block;
}

.sub-nav {
  display: none;
  text-align: center;
  position: absolute;
  min-width: 8rem;
  box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.2);
  padding: 1rem 1.5rem;
  z-index: 1;
}

.sub-nav {
  padding-left: 5rem;
}

.top-menu-nav:hover .sub-nav {
  display: block;
}
<div class="header-dropdown-menu">
  <ul class="top-nav">
    <li class="top-menu-nav"><a href="#">Menu</a>
      <ul class="sub-nav">
        <li><a href="#">wood Type</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Specification</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Images</a></li>
        <li><a href="#">FAQ</a></li>
      </ul>
    </li>
  </ul>
</div>
0 голосов
/ 07 ноября 2019

Это может быть сделано с использованием свойства position -

Установите родительский элемент в относительное положение (это создает контейнер для дочерних элементов), а в дочернем элементе установите абсолютное значение. Теперь вы можете диктовать, используя свойства top / left / bottom / right, где вы хотите разместить элемент. Имейте в виду, что центральная точка элементов по умолчанию будет размещена в верхнем левом углу - это означает, что вам нужно будет преобразоватьэлементы на -50% (сверху и слева) для их центрирования - Пример ниже: 

li.top-menu-nav {
    position: relative;
    width: 100%;
}

ul.sub-nav {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

Пожалуйста, имейте в виду, что если вы хотите центрировать LI, вам нужно добавить - 

ul.sub-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 50%);
}

также обратите внимание, что высота, на которую может быть перемещен дочерний элемент (в данном случае li), будет зависеть от высоты родительского элемента, поэтому top-menu-nav a height:100vh позволит расположить меню вцентр страницы.

Надеюсь, это поможет, Уолли

...