Question

我试图让hq（菜单项）在悬停时加宽（水平）以适应所有ul项目（子菜单项）而不用硬编码宽度，因此没有文字浮动或被切断。

我正在使用无序列表制作菜单。每个子菜单项都在主菜单的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

这里的一个大问题是，父{name}}元素只知道与主li一样大，直到悬停，因为孩子a有ul这意味着宽度实际为0.而不是使用display:none;，您可以尝试强制高度为0并保留初始宽度。然后在悬停时，执行display:none;以显示菜单项。请记住使用height:inherit;，这样当高度不够大时，事情就不会超出元素范围。

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

展开li元素以适合内容

1 个答案: