Question

我找到了this question和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创建一些没有子菜单的链接。

我也有这个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;

  }

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

有没有办法让子菜单大于父元素而不牺牲父元素的布局？

Answer 1

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

Answer 2

我会让父李相对定位并且子导航绝对定位，这应该解决你的问题。

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

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

2 个答案: