Запретить элементам списка flexbox изменять ширину родительского элемента при наведении на дочерние элементы - PullRequest
Новая
       10

Запретить элементам списка flexbox изменять ширину родительского элемента при наведении на дочерние элементы

0 голосов
/ 14 января 2019

У меня есть ряд элементов списка, а у некоторых есть дочерний список, содержащий суб-навигационные ссылки. Я использую CSS для создания эффекта наведения, имея display: none для дочернего элемента <ul> и затем устанавливая значение display: block при наведении.

Однако это приводит к нежелательному эффекту роста родительского элемента <li> при наведении курсора. Есть ли способ предотвратить это? При наведении на <li> элементы, которые не имеют дочерних списков, их ширина остается неизменной. 

<ul class="flex unstyled-list">
  <li><a href="/">link</a></li>
  <li><a href="/" target="_blank">link 2</a></li>
  <li>
    <a href="/">parent 1</a>
    <ul class="unstyled-list">
      <li><a href="/">Hgdfgdf</a></li>
      <li><a href="/">Hgdfgdf</a></li>
    </ul>
  </li>
  <li>
    <a href="/">parent 2</a>
    <ul class="unstyled-list">
      <li><a href="/">Hgdfgdf gdf ggf dfs</a></li>
      <li><a href="/">Hgdfgdf gdf gdf gfd</a></li>
    </ul>
  </li>
</ul>


.unstyled-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.flex {
  width: 970px;
  height: 37px;
  display: flex;
  flex: 1 0 auto;
  flex-basis: 100%;
  background-color: #000;
}

.flex li {
  flex-grow: 1;
  height: 37px;
  line-height: 37px;
  color: #fff;
  text-align: center;
}

#nav-strip li:hover {
  background-color: #000;
}

.flex li:hover ul {
  display: block;
}

.flex li a {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.flex li ul {
  display: none;
  width: 200px;
  padding: 0;
}

.flex li ul li {
  width: 185px;
  height: 30px;
  line-height: 30px;
  padding: 0 0 0 15px;
  background: #000;
  text-align: left;
}

.flex li ul li:hover {
  background: #1e1d3f;
}

.flex li ul li a {
  display: block;
  font-size: 12px;
  font-weight: normal;
}

Пример выполнения:

https://jsfiddle.net/ndp1y79b/1/

1 Ответ

0 голосов
/ 14 января 2019

Благодаря @Temani Afif и @Pete - добавление 

positon: absolute;
top: 100%

на ребенке <ul> исправил эту проблему. Спасибо - намного проще, чем я думал!

...