下拉菜单<li>元素不是全宽为父

Question

我正在个人网站上工作并试图在我的某些导航栏元素上实现下拉行为。目前，我的导航栏的相关CSS和HTML是：

＆＃13;

＆＃13;

.dropdown-content {
  display: none;
  position: absolute;
}

.dropdown-content {
  list-style: none;
}

.dropdown-content li {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #e6e6e6;
}

.dropdown:hover .dropdown-content {
  display: block;
}

＆＃13;

<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li><a href="/wantlists">Wantlists</a></li>
    <li class="dropdown"><a href="#">Hover here</a>
      <ul class=dropdown-content>
        <li><a href="#">Test!</a></li>
        <li><a href="#">Longer title</a></li>
      </ul>
    </li>
    <!-- End parent dropdown -->
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

只跨越父李的宽度的一半，我不能为我的生活找出如何让它跨越整个宽度。下面是我的导航栏部分悬停在＆＃34; Hover here＆＃34;元件。我喜欢＆＃34;测试的灰色背景！＆＃34;和＃34;更长的标题＆＃34; sub-li元素向左扩展到＆＃34的白色背景的宽度; Hover here＆＃34;元件。我尝试了很多不同的东西，并探讨了类似的问题，但我见过的答案都没有解决我的问题

我能够通过向.dropdown-content添加背景颜色规则来获得我想要的灰色背景，但接下来我将在下拉列表中更改悬停时单个li元素的背景颜色，以及然后我又回到了能够突出那个李区域的一部分，所以这并不是我正在寻找的

Answer 1

您需要调整链接/ href的大小而不是li，并且您忘记了列表类的引号＆＃34; dropdown-content＆＃34;在HTML中。我添加了一个全局选择器来模拟css重置，只是为了正确显示列表样式和间距：

＆＃13;

＆＃13;

* {
margin: 0;
padding: 0;
}

.dropdown-content {
      /*display: none;*/
      position: absolute;
}
ul.nav {
      list-style: none;
}
.dropdown-content a {
      padding: 1em;
      background-color: #e6e6e6;
      display: block;
}
ul.dropdown-content {
margin: 0;
padding: 0;
list-style: none;
}
.dropdown-content li {
margin: 0;
padding: 0;
}
.dropdown:hover .dropdown-content {
      display: block;
}

＆＃13;

<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
      <li><a href="/wantlists">Wantlists</a></li>
      <li class="dropdown"><a href="#">Hover here</a>
           <ul class="dropdown-content">
                <li><a href="#">Test!</a></li>
                <li><a href="#">Longer title</a></li>
           </ul>
      </li> <!-- End parent dropdown -->
</ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您使<li>全宽而不是<a>，则无法点击整个菜单项。这里有一些代码可以让你指出正确的方向。

需要注意的主要事项：

• 删除.dropdown-content
的填充
• 取得.dropdown-content父li
的全宽
• 重复关于li和a
的最后一条说明
• 为:hover
制作了a课程

.nav li {
      display: inline-block;
      position: relative;
}
.dropdown-content {
      display: none;
      position: absolute;
}
.dropdown-content {
      list-style: none;
      padding-left: 0; /* moves the dropdown to matche left alignment of menu item */
      min-width: 100%; /* makes the dropdown container the same width as the menu item */
}
.dropdown-content li {
      width: 100%; /* makes the dropdown menu item the same width as the container */
}
.dropdown-content a {
      display: block;
      padding-top: 15px;
      padding-bottom: 15px;
      background-color: #e6e6e6;
      width: 100%;  /* makes the anchor tag the same width as the dropdown menu item */
}
.dropdown-content a:hover {
      background-color: #dddddd; /* add a hover color the the anchor tag instead of the li */
}
.dropdown:hover .dropdown-content {
      display: block;
}

<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
      <li><a href="/wantlists">Wantlists</a></li>
      <li class="dropdown"><a href="#">Hover here</a>
           <ul class="dropdown-content">
                <li><a href="#">Test!</a></li>
                <li><a href="#">Longer title</a></li>
           </ul>
      </li> <!-- End parent dropdown -->
</ul>
</div>

Answer 3

请添加以下css

.dropdown-content
{
    padding-left: 0px;
}

这样可行。

Answer 4

* {
margin: 0;
padding: 0;
}

.dropdown-content {
      /*display: none;*/
      position: absolute;
}
ul.nav {
      list-style: none;
}
.dropdown-content a {
      padding: 1em;
      background-color: #e6e6e6;
      display: block;
}
ul.dropdown-content {
margin: 0;
padding: 0;
list-style: none;
}
.dropdown-content li {
margin: 0;
padding: 0;
}
.dropdown:hover .dropdown-content {
      display: block;
}

<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
      <li><a href="/wantlists">Wantlists</a></li>
      <li class="dropdown"><a href="#">Hover here</a>
           <ul class="dropdown-content">
                <li><a href="#">Test!</a></li>
                <li><a href="#">Longer title</a></li>
           </ul>
      </li> <!-- End parent dropdown -->
</ul>
</div>

* {
margin: 0;
padding: 0;
}

.dropdown-content {
      /*display: none;*/
      position: absolute;
}
ul.nav {
      list-style: none;
}
.dropdown-content a {
      padding: 1em;
      background-color: #e6e6e6;
      display: block;
}
ul.dropdown-content {
margin: 0;
padding: 0;
list-style: none;
}
.dropdown-content li {
margin: 0;
padding: 0;
}
.dropdown:hover .dropdown-content {
      display: block;
}

<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
      <li><a href="/wantlists">Wantlists</a></li>
      <li class="dropdown"><a href="#">Hover here</a>
           <ul class="dropdown-content">
                <li><a href="#">Test!</a></li>
                <li><a href="#">Longer title gre gre gẻ gẻ gre gé</a></li>
           </ul>
      </li> <!-- End parent dropdown -->
</ul>
</div>