Как заставить дочерний элемент <ul>взять его родительский <li>width

Question

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

nav {
  position: relative;
  display: flex;
  width: 100%;
  margin: 0 auto;
  justify-content: space-between;
}

nav>ul.nav_list {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  height: 40px;
}

nav>ul>li {
  height: 100%;
  margin: 0px 4px;
  padding: 0px 8px;
  font-size: 18px;
}

nav>ul>li>div {
  border-bottom: 2px solid #D88B1D;
  padding: 8px 9.5px 2px;
  transition: border-bottom .1s;
  line-height: 22px;
}

nav>ul>li>div:hover {
  border-bottom: 4px solid #D88B1D;
}

.first {
  display: flex;
  justify-content: center;
  width: 242px;
}

li.dropdown {
  font-size: 18px;
  font-weight: bold;
}

.dropdown:hover {
  display: flex;
  justify-content: center;
  background-color: #42526e;
  border-radius: 5px 5px 0px 0px;
}

.dropdown:hover>div.first {
  border: none;
}

nav>ul>li>ul.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  display: none;
  background-color: gold;
  z-index: 99;
}

li.dropdown:hover>ul.dropdown-content {
  display: block;
}

.dropdown:hover>div.first>a {
  color: white;
}

<nav>
  <ul class="nav_list">
    <li class="dropdown">
      <div class="first">
        <a href="#">All Catgories</a>
      </div>
      <ul class="dropdown-content">
        <li> <a href="#">Link1</a></li>
        <li> <a href="#">Link2</a></li>
        <li> <a href="#">Link3</a></li>
      </ul>
    </li>
    <li>
      <div><a href="#">Shop by brand</a></div>
    </li>
    <li>
      <div><a href="#">Online Exclusive</a></div>
    </li>
  </ul>
</nav>

Answer 1

Когда вам нужно position: absolute элемента относительно его родителя, вам нужно, чтобы у родителя был свой контекст стека . Таким образом, родитель становится offsetParent - его границы смещения будут использоваться для позиционирования.

В вашем случае вы должны установить position: relative на li.dropdown.
Затем на ul.dropdown-content установите left: 0; right:0;, чтобы растянуть его между левой и правой границами, чтобы он занимал 100% ширины родителя:

nav>ul.nav_list {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  height: 40px;
}

nav>ul>li {
  height: 100%;
  margin: 0px 4px;
  padding: 0px 8px;
  font-size: 18px;
}

nav>ul>li>div {
  border-bottom: 2px solid #D88B1D;
  padding: 8px 9.5px 2px;
  transition: border-bottom .1s;
  line-height: 22px;
}

nav>ul>li>div:hover {
  border-bottom: 4px solid #D88B1D;
}

.first {
  text-align: center;
  width: 242px;
}

li.dropdown {
  font-size: 18px;
  font-weight: bold;
  position:relative;
}

.dropdown:hover {
  background-color: #42526e;
  border-radius: 5px 5px 0px 0px;
}

.dropdown:hover>div.first {
  border: none;
}

nav>ul>li>ul.dropdown-content {
  position: absolute;
  top: 100%;
  right:0; left: 0;
  display: none;
  background-color: gold;
}

li.dropdown:hover>ul.dropdown-content {
  display: block;
}

.dropdown:hover>div.first>a {
  color: white;
}

<nav>
  <ul class="nav_list">
    <li class="dropdown">
      <div class="first">
        <a href="#">All Catgories</a>
      </div>
      <ul class="dropdown-content">
        <li> <a href="#">Link1</a></li>
        <li> <a href="#">Link2</a></li>
        <li> <a href="#">Link3</a></li>
      </ul>
    </li>
    <li>
      <div><a href="#">Shop by brand</a></div>
    </li>
    <li>
      <div><a href="#">Online Exclusive</a></div>
    </li>
  </ul>
</nav>