javascript - 扩展 li 元素以适合内容

Question

我试图让父 li(菜单项)在悬停时(水平)加宽以适应所有 ul li 项(子菜单项)，而不对宽度进行硬编码，因此没有文本 float 或 chop 。

我正在使用无序列表制作菜单。每个子菜单项都在主菜单的 li 标签内。我的菜单是水平的，当您将鼠标悬停在元素上时会显示子菜单项。

我尝试了各种方法来尝试让 li 元素扩展到子菜单项的大小，或者如果它们较小则保持相同的大小。我笨拙但有效的方法是在悬停时硬编码 22% 的宽度。我想知道是否有办法做到这一点并很好地适应文本而不是有很多空白。对宽度进行硬编码还会导致没有子菜单项的菜单项展开(我可以解决这个问题，但我不想一开始就对其进行硬编码)。

我需要完全使用 vanilla html、css 和 javascript 来完成这项工作。如果解决方案是跨浏览器兼容的，那也很好。

如果我的代码是非常规的，我深表歉意，我一直在努力自学 css。提前谢谢你。

以下是我的 HTML/CSS 示例(不包括链接):

body {
  margin: 0;
}
*{
  font-family: Gotham Book, Arial, Helvetica, Sans-serif;
}
#navbar {
  background-color: #f1f1f1;
  text-align: center;
}
#navbaritems {
  margin: 0 auto;
}
#navbaritems ul {
  padding: 0;
  width: 100%;
  list-style-type: none;
  margin: 0;
  display: inline;
  position: relative;
  font-size: 0;
}
#navbaritems ul li {
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  color: #000;
  position: relative;
}
#navbaritems ul li ul {
  width: 100%;
  padding: 0;
  position: absolute;
  top: 6vh;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  text-align: center;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
#navbaritems ul li ul li {
  background-color: #f1f1f1;
  display: block;
}
#navbaritems ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
#navbaritems ul li:hover {
  -o-transition: 1s;
  -ms-transition: 1s;
  -moz-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
  width: 22%;
}
#navbaritems ul li ul li:hover {
  -o-transition: 1s;
  -ms-transition: 1s;
  -moz-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
  width: 100%;
}
#navbaritems ul li a {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  font-size: 1vw;
  display: block;
  height: 4vh;
  line-height: 4vh;
  color: #808080;
  text-decoration: none;
  padding: 1vh;
  margin: 0;
}
#navbaritems ul li a:hover:not(.active) {
  background-color: #82c986;
  color: #ffffff;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
  cursor: pointer;
  display: block;
}
#navbaritems ul li a.active {
  color: #ffffff;
  background-color: #4CAF50;
}

<div id="navbar" class="addBottomShadow">
  <div id="navbaritems">
    <ul>
      <li><a class="active">Home</a>
      </li>
      <li><a>Patient Eligibility</a>
        <ul>
          <li><a>Eligibility Tracker</a>
          </li>
        </ul>
      </li>
      <li><a>Claim Status</a>
      </li>
      <li><a>Remittance Advice</a>
      </li>
      <li><a>E-Claims Batch Status</a>
      </li>
      <li><a>Fees</a>
        <ul>
          <li><a>Update Fees</a>
          </li>
          <li><a>Reimbursement Report</a>
          </li>
          <li><a>Reimbursement Detail Report</a>
          </li>
          <li><a>Submit Fees</a>
          </li>
        </ul>
      </li>
      <li><a>Inquiries</a>
        <ul>
          <li><a>Customer Service Inquiries</a>
          </li>
          <li><a>COB Change Requests</a>
          </li>
          <li><a>Submit Inquiry</a>
          </li>
        </ul>
      </li>
      <li><a>Settings</a>
        <ul>
          <li><a>Procedure Sets</a>
          </li>
          <li><a>Eligibility Tracker</a>
          </li>
          <li><a>Claim Settings</a>
          </li>
          <li><a>Remittance Advice</a>
          </li>
          <li></li>
        </ul>
      </li>
      <li><a>Other</a>
        <ul>
          <li><a>Provider Seminars</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>

</div>

Answer 1

这里最大的问题是父级 li元素只知道和主元素一样大 a直到悬停因为 child ul有display:none;这意味着宽度实际上是 0。而不是使用 display:none;您可以尝试强制高度为 0 并保留初始宽度。然后悬停，执行 height:inherit;显示菜单项。记得用 overflow:hidden;所以当高度不够大时，东西不会超出元素。

编辑:需要做更多的工作，但是 I think this正是您要找的。