2

我的问题：如果我的下拉菜单中的主要导航项的名称增加了字符长度，我的下拉菜单就会中断（请参阅附加的 imageTwo）。导航项目名称中的字符增加时布局混乱

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

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

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

我的想法是，我需要使用一些 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;
}

在此处输入图像描述

4

1 回答 1

2 
#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 或与父菜单高度相同。

于 2012-07-26T18:36:03.260 回答