菜單項的寬度和最大寬度之間的下拉菜單大小的水平菜單

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>