如何使下拉菜单与导航中每个 <li> 的宽度相同？

Question

我正在尝试创建一个下拉菜单，但出于某种原因，我无法找到使它的宽度与导航中每个 <li> 相同的方法。

/* GENERAL STYLES */
* {
    margin: 0px;
    padding: 0px;
}

body {
    background-image: url("../img/paven.png");
}

@font-face {
    font-family: "nevis";
    src: url("../fonts/nevis.ttf");
}

/* MENU */
nav {
    width: 100%;
    height: 40px;
    background-color: #333;
}

nav > div {
    width: 1000px;
    margin: 0px auto;
}

nav > div > ul {
    float: left;
}

nav > div > ul > li {
    list-style: none;
    height: 40px;
    padding-left: 20px;
    padding-right: 20px;
    border-right: 1px solid gray;
}

nav > div > ul > li > a {
    display: block;
    height: 40px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: white;    
    line-height: 35px;
}

nav > div > ul > li:hover {
    cursor: pointer;
    background-color: #70B231;
}

/* SUBMENU */
nav > div > ul > li > ul {
    position: absolute;
    width: 100px;
    background-color: #70B231;
}

<!-- MENU -->
<nav>
  <div>
    <ul>
      <li><a href="#">Home</a></li>
    </ul>
    <ul>
      <li><a href="#">Content</a></li>
    </ul>
    <ul>
      <li><a href="#">Requirements</a></li>
    </ul>
    <ul>
      <li>
        <a href="#">Languages</a>
        <ul>
          <li><a href="#">JavaScript</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">HTML</a></li>
        </ul>
      </li>
    </ul>
    <ul>
      <li>
        <a href="#">Frameworks</a>
        <ul>
          <li><a href="#">Less</a></li>
          <li><a href="#">Sass</a></li>
          <li><a href="#">Flexbox</a></li>
        </ul>
      </li>
    </ul>
    <ul>
      <li><a href="#">Projects</a></li>
    </ul>
    <ul>
      <li><a href="#">Instructor</a></li>
    </ul>
    <ul>
      <li><a href="#">Reviews</a></li>
    </ul>
    <ul>
      <li><a href="#">Blog</a></li>
    </ul>
    <ul>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

如您所见，我已尝试为每个 <ul> 设置宽度，但它们与它们所属的 <li> 没有很好地对齐：

我想实现这样的目标：

Answer 1

给你，我编辑了一些东西。

我删除了主菜单 li 元素上的 padding 并将其放在 a 上，这样子菜单就可以占据整个宽度。

已将 postition: relative; 添加到主菜单 li，因此子菜单 postition: absolute 将相对于主菜单项

使用 width 100% 使子菜单全宽并删除列表样式。

在子菜单中添加了一些 padding li

/* GENERAL STYLES */
* {
  margin: 0px;
  padding: 0px;
}

body {
  background-image: url("../img/paven.png");
}

@font-face {
  font-family: "nevis";
  src: url("../fonts/nevis.ttf");
}

/* MENU */
nav {
  width: 100%;
  height: 40px;
  background-color: #333;
}

nav>div {
  width: 1000px;
  margin: 0px auto;
}

nav>div>ul {
  float: left;
}

nav>div>ul>li {
  list-style: none;
  height: 40px;
  position: relative;
  border-right: 1px solid gray;
}

nav>div>ul>li>a {
  display: block;
  height: 40px;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: white;
  line-height: 35px;
  padding-left: 20px;
  padding-right: 20px;
}

nav>div>ul>li:hover {
  cursor: pointer;
  background-color: #70B231;
}

/* SUBMENU */
nav>div>ul>li>ul {
  position: absolute;
  width: 100%;
  background-color: #70B231;
  list-style: none;
}

nav>div>ul>li>ul>li {
  padding: 3px 10px;
}

<!-- MENU -->
<nav>
  <div>
    <ul>
      <li><a href="#">Home</a></li>
    </ul>
    <ul>
      <li><a href="#">Content</a></li>
    </ul>
    <ul>
      <li><a href="#">Requirements</a></li>
    </ul>
    <ul>
      <li>
        <a href="#">Languages</a>
        <ul>
          <li><a href="#">JavaScript</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">HTML</a></li>
        </ul>
      </li>
    </ul>
    <ul>
      <li>
        <a href="#">Frameworks</a>
        <ul>
          <li><a href="#">Less</a></li>
          <li><a href="#">Sass</a></li>
          <li><a href="#">Flexbox</a></li>
        </ul>
      </li>
    </ul>
    <ul>
      <li><a href="#">Projects</a></li>
    </ul>
    <ul>
      <li><a href="#">Instructor</a></li>
    </ul>
    <ul>
      <li><a href="#">Reviews</a></li>
    </ul>
    <ul>
      <li><a href="#">Blog</a></li>
    </ul>
    <ul>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

如何使下拉菜单与导航中每个 <li> 的宽度相同？

How to make dropdown menu same width as each <li> in nav?

html

css

drop-down-menu