Html 允许子菜单比其父菜单大而不牺牲布局？

我找到了，还有。我尝试应用

空白：nowrap到我的代码，但没有运气。第二个问题，我根本无法分辨什么是相关的，什么是不相关的

我有这个HTML：

<ul id="main-menu-list">
        <li><a class="box-link" href="#/home">Home</a></li>
        <li><a class="box-link" id="shop-link" href="#/shop">Shop</a>
          <ul>
            <li>
              <a href="">Test</a>
            </li>
            <li>
              <a href="">Test 2</a>
            </li>
          </ul>
        </li>
        <li ng-repeat="linkData in coreCtrl.mainMenuData"><a class="box-link" href="#/{{ linkData.linkUrl }}">{{ linkData.value }}</a></li>
      </ul>

这里的最终目标是为包含商店类别的“商店”链接创建一个子菜单。但是，下拉列表需要比父列表项更宽。我可以增加子菜单的宽度，但代价是增加父
元素的宽度，这会破坏主菜单的布局

有没有办法在不牺牲父元素布局的情况下使子菜单比父元素大？
对下拉列表ul使用css属性
position:absolute
，对父元素ul使用css属性
position:relative
然后定义下拉列表ul的顶部和宽度，它将工作
我将使父li相对定位，子nav绝对定位，这将解决您的问题

#main-menu-list li {position: relative;}
#main-menu-list li > ul {position: absolute; top: 100%; left: 0;}

回答正确，Ankit先回答。哈，减去示例；）啊。我将这些问题解释为绝对定位子目录ul的子元素，而不是实际的无序列表。如果您的问题已经解决，您应该接受答案。
#main-menu-list li {position: relative;}
#main-menu-list li > ul {position: absolute; top: 100%; left: 0;}