javascript - 如何调整基于导航菜单的导航元素名称字符长度？

Question

我的问题:如果下拉菜单中主导航项的名称字符长度增加，我的下拉菜单就会中断(请参阅附图二)。

我使用相对测量单位(主要是ems)，希望能给我的设计带来一些响应，并在主要导航项的字符长度增加的情况下调整布局，但它不起作用。

我的主菜单是相对定位的，子菜单是绝对定位的。这些子菜单不是像标准那样垂直下拉，而是与其上方的主菜单平行水平展开(参见附图)。

我现在的目标是弄清楚如何纠正代码，以便在主菜单中导航项的字符数增加或减少的情况下 a) 我的主导航菜单可以适本地重新调整其宽度 b)我的子菜单将重新调整其位置，使其直接出现在其上方主菜单的下方。

我的想法是，我需要使用一些 jQuery 来完成此操作，但我想知道是否可以仅使用 CSS。

我已经在下面发布了我的 CSS；如果需要更多信息，请告诉我。

#navigation {
  background: rgb(102,102,102); 
  max-height: 3.34em;
  padding: 0;
  position: relative;
  max-width: 48.5em;
  border-radius: 0;
}

#navigation .child-menu, #navigation .child-menu2 {
  display: none;
}

#navigation li.hover #admin-submenu  {
  left: -405px;
}

#navigation li.hover .child-menu {
  background: #47766c;
  display: block;
  position: absolute;
  width: 80em;          
  z-index: 250;
  top: 39px;
  left: -334px;
}

#navigation ul li ul li:hover .child-menu2 {
  background: #47766C;
  display: block;
  left: 0;
  position: absolute;
  top: 40px;
  width: 110px;
  z-index: 250;
}

Answer 1

#navigation ul li ul {
    position:absolute;
    min-width:100%;
    height:40px;
    margin:0px;
    padding:0px;
    left:0px;
    top:40px;
}
#navigation ul li ul li {
   float:left;
   height:40px;
   display:block;
   padding-left:15px;
   padding-right:15px;
}

您必须将子菜单 ul 标记的最小宽度设置为 100% 或与页面相同的宽度。然后是它的 left:0px;然后顶部是 40px 或与父菜单高度相同。