Выпадающие меню ломаются, когда родительская ширина не определена - PullRequest
Новая
       17

Выпадающие меню ломаются, когда родительская ширина не определена

0 голосов
/ 16 мая 2019

У меня есть панель навигации, где длина символов каждого элемента списка существенно варьируется. Я предпочитаю визуальный эффект оставления ширины на авто и добавления отступов для определения одинаковой ширины для каждого элемента.

Я хочу, чтобы мои раскрывающиеся списки наследовали ширину родительских элементов списка. Вместо этого они так же широки, как их собственный контент.

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

Я также пытался установить ul ul ul width для наследования, но безрезультатно.

HTML: 

  <div id="nav"> <!--nestled in div to provide full view-width bar-->
    <ul>
      <li>Item 1 is medium
        <ul>
          <li><a>Section 1</a></li>
          <li><a>Section 2</a></li>
          <li><a>Section 3</a></li>
        </ul>
      </li>
      <li>Item 2 is medium
        <ul>
          <li><a>Section 1</a></li>
          <li><a>Section 2</a></li>
          <li><a>Section 3</a></li>
        </ul>
      </li>
      <li>Item 3 is very long
        <ul>
          <li><a>Section 1</a></li>
          <li><a>Section 2</a></li>
          <li><a>Section 3</a></li>
        </ul>
      </li>
      <li>Item 4 is short
        <ul>
          <li><a>Section 1</a></li>
          <li><a>Section 2</a></li>
          <li><a>Section 3</a></li>
        </ul>
      </li>
    </ul>
  </div>

CSS: 

#nav {
  background-color: #181818;
  width: 100vw;
}

ul {
  height: 60px;
  margin-left: 7em;
  margin-top: 0;
  padding: 0;
  list-style: none;
  font-family: 'Open Sans', sans-serif;
}

ul li {
  float: left;
  line-height: 60px;
  text-align: center;
  color: #dcdcdc;
  padding-left: 1em;
  padding-right: 1em;
}

ul li a {
  text-decoration: none;
}

ul li ul {
  width: inherit;
}

ul li ul li {
  background-color: #181818;
  margin-left: -7em;
  display: none;
}

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

Есть ли лучшее решение для установки раскрывающихся списков на ширину их родительских элементов списка, чем ручное определение ширины каждого раскрывающегося списка?

Ответы [ 2 ]

0 голосов
/ 16 мая 2019

CSS: 

#nav {
  background-color: #181818;
  width: 100vw;
}

#nav ul {
    padding: 0;
    list-style: none;
}

#nav > ul {
  height: 60px;
  margin-left: 7em;
  font-family: 'Open Sans', sans-serif;
}

#nav > ul > li {
  float: left;
  line-height: 60px;
  text-align: center;
  color: #dcdcdc;
  padding-left: 1em;
  padding-right: 1em;
}


#nav > ul li a {
  text-decoration: none;
}

#nav > ul > li > ul {
    margin-left: -1em;
    margin-right: -1em;
     display: none;
}

#nav > ul > li > ul > li {
  background-color: #181818;
}

#nav > ul > li:hover > ul {
  display: block;
}
0 голосов
/ 16 мая 2019

Это код 

#nav {
  background-color: #181818;
  width: 100vw;
}

ul {
  height: 60px;
  margin-left: 7em;
  margin-top: 0;
  padding: 0;
  list-style: none;
  font-family: 'Open Sans', sans-serif;
}

ul li {
  float: left;
  line-height: 60px;
  text-align: center;
  color: #dcdcdc;
  padding-left: 1em;
  padding-right: 1em;
}

ul li a {
  text-decoration: none;
}

ul li ul {
  width: 100%;
  display: inline-table;
}

ul li ul li {
  background-color: #181818;
  margin-left: -7em;
  display: none;
  width: 100%;
}

ul li:hover ul li {
  display: block;
}
<div id="nav"> <!--nestled in div to provide full view-width bar-->
    <ul>
      <li>Item 1 is medium
        <ul>
          <li><a>Section 1</a></li>
          <li><a>Section 2</a></li>
          <li><a>Section 3</a></li>
        </ul>
      </li>
      <li>Item 2 is medium
        <ul>
          <li><a>Section 1</a></li>
          <li><a>Section 2</a></li>
          <li><a>Section 3</a></li>
        </ul>
      </li>
      <li>Item 3 is very long
        <ul>
          <li><a>Section 1</a></li>
          <li><a>Section 2</a></li>
          <li><a>Section 3</a></li>
        </ul>
      </li>
      <li>Item 4 is short
        <ul>
          <li><a>Section 1</a></li>
          <li><a>Section 2</a></li>
          <li><a>Section 3</a></li>
        </ul>
      </li>
    </ul>
  </div>

width: 100%; и display: inline-table; сделали правду

...