在不牺牲布局的情况下允许子菜单大于其父菜单？

Question

我找到了 this question, and this question。我尝试将 whitespace: 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>

在最后一点，我使用 Angular 从 JSON 创建一些没有子菜单的 link。

我也有这个CSS：

#main-menu-list, #main-menu-list ul {

    padding: 0;
    margin: 0;
    list-style: none;

  }

  #main-menu-list > li {

    float: left;
    margin-right: 20px;
    line-height: 65px;

  }

  #main-menu-list > li > a {

    font-weight: bold;
    font-size: 20px;
    color: #6e6e6e;
    border: 2px solid #6e6e6e;
    padding-top: 5px;
    padding-bottom: 5px;

  }

  #main-menu-list > li > a:hover {

    border: 2px solid #a1b489;
    color: #a1b489;
    text-decoration: none;

  }

  #main-menu-list > li > ul > li {

    background-color: #fff;
    position: relative;
    z-index: 5;
    margin: 0;

  }

  #main-menu ul a {

    white-space: nowrap;

  }

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

有什么方法可以在不牺牲父元素布局的情况下使子菜单大于父元素？

Answer 1

下拉ul使用css属性position : absolute，父ul使用position : relative 之后定义下拉 ul 的顶部和宽度，它将起作用

Answer 2

我会让父 li 相对定位，子导航绝对定位，这应该可以解决你的问题。

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

在不牺牲布局的情况下允许子菜单大于其父菜单？

Allowing a sub-menu to be larger than its parent without sacrificing layout?

html

css

menu

width

submenu