水平菜单，在菜单项的宽度和最大宽度之间具有下拉菜单大小

Question

我需要一个带下拉菜单的简单水平菜单的帮助。

我希望.drop尺寸不小于.item尺寸，并且在max-width限制内尽可能大。

问题：.drop不会扩展为max-width。

＆＃13;

＆＃13;

div {
  background: #333;
  color: white;
}

ul {
  padding: 0;
}

li {
  list-style: none;
  padding: 5px 10px;
  position: relative;
}

.item {
  display: inline-block;
}

.drop {
  background: #666;
  display: none;
  left: 0;
  max-width: 400px;
  min-width: 100%;
  position: absolute;
  top: 100%;
}

.item:hover .drop {
  display: block;
}

＆＃13;

<div>
  <ul>
    <li class="item">Lorem
      <ul class="drop">
        <ul>
          <li>Lorem</li>
          <li>Lorem ipsum</li>
          <li>Lorem ipsum dolor sit amet, 
              consectetur adipiscing elit, 
              sed do eiusmod tempor incididunt ut 
              labore et dolore magna aliqua</li>
        </ul>
      </ul>
    </li>
    <li class="item">Lorem ipsum dolor
      <ul class="drop">
        <li>Lorem</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

首先.item没有指定的宽度，min-width:100%;覆盖min-width:400px;，从而使.drop 100％的父宽度。并且父级没有分配宽度。

由于.item设置为显示块，因此也为其指定了100％的宽度。

Answer 2

这是解决方案。你需要将下拉列表再包装一个ul并应用以下ccs规则来实现这一目标。只需相应地设置所需的宽度和最大宽度。

div {
  background: #333;
  color: white;
  font-size: 0px;
}

ul {
  padding: 0;
}

li {
  list-style: none;
  padding: 5px 10px;
  position: relative;
  display: inline-block;
  font-size: 16px;
}

a {
  display: block;
}

.drop {
  display: none;
  left: 0;
  width: 250px;
  /* Width of the width */
  position: absolute;
  top: 100%;
  background: transparent;
}

ul li ul {
  display: inline-block;
  max-width: 250px;
  /* max width it will cover */
  box-shadow: 0 0 2px rgba(0, 0, 0, .6);
  padding: 0;
  background: #666;
  padding: 10px;
}

ul li .drop li {
  display: table-row;
  /* display like a table-row */
}

.item:hover .drop {
  display: block;
}

<div>
  <ul>
    <li class="item">Lorem
      <div class="drop">
        <ul>

          <li>Lorem</li>
          <li>Lorem</li>
          <li>Lorem ipsum dolor sit amet, 
              consectetur adipiscing elit, 
              sed do eiusmod tempor incididunt ut 
              labore et dolore magna aliqua</li>

        </ul>
      </div>
    </li>
    <li class="item">Lorem ipsum dolor
      <div class="drop">
        <ul>
          <li>Lorem</li>
          <li>Lorem</li>
          <li>Lorem</li>
          <li>Lorem</li>
        </ul>
      </div>
    </li>
  </ul>
</div>