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

Question

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

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

问题是：.drop不扩展到max-width。

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; 
 
}

<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>

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>