如何根据导航项目名称字符长度调整导航菜单？

Question

我的问题：如果我的下拉菜单中主要导航项的名称字符长度增加，则我的下拉菜单会中断（请参阅附图中的两个）。

我正在使用相对测量单位（大多数是ems）希望能够对我的设计做出一些响应，并在主要导航项的字符长度增加的情况下调整布局，但它不起作用。 / p>

我的主菜单相对定位，子菜单绝对定位。这些子菜单，而不是标准的垂直下拉，而是水平扩展，与其上方的主菜单平行（参见附件imageOne）。

我现在的目标是找出如何纠正代码，以便在主菜单中导航项的字符数增加或减少的情况下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％或与页面相同的宽度。然后它的左边：0px;然后顶部是40px或与父菜单高度相同。