如何在父母的下拉菜單中保留子標題的寬度？

我想保持下拉內容的寬度與父項相同，但我沒有這麼做，因爲一些子標題的長度比父項長。我應該如何處理下拉菜單中較長的標題？如何在父母的下拉菜單中保留子標題的寬度？

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    position: absolute; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    float: left; 
 
    margin-right: 1px; 
 
} 
 

 
li a { 
 
    display: block; 
 
    min-width: 100px; 
 
    height: 50px; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    color: #fff; 
 
    background: #2f3036; 
 
    text-decoration: none; 
 
} 
 

 
li:hover a { 
 
    background: #97455f; 
 
} 
 

 
li:hover ul a { 
 
    background: grey; 
 
    color: #2f3036; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    text-align: center; 
 
} 
 

 
li:hover ul a:hover { 
 
    background: #97455f; 
 
    color: #fff; 
 
} 
 

 
li ul { 
 
    display: none; 
 
} 
 

 
li ul li { 
 
    display: block; 
 
    float: none; 
 
} 
 

 
.hidden { 
 
    padding: 0; 
 
} 
 

 
ul li a:hover+.hidden, 
 
.hidden:hover { 
 
    display: block; 
 
    width: auto; 
 
} 
 

 
@media screen and (max-width: 460px) { 
 
    ul { 
 
    position: static; 
 
    display: none; 
 
    } 
 
    li { 
 
    margin-bottom: 1px; 
 
    } 
 
    ul li, 
 
    li a { 
 
    width: 100%; 
 
    } 
 
    .show-menu { 
 
    display: block; 
 
    } 
 
}

<ul class="menu"> 
 
    <li><a href="#">Somthing</a></li> 
 
    <li> <a href="#">something</a> 
 
    <ul class="hidden"> 
 
     <li><a href="#">somethoingaaaaaaaaaaaaaaaaaaaaa</a></li> 
 
     <li><a href="#">something</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

來源

2017-08-10 fff

你想隱藏四溢的文字？如果是這樣，添加到.hidden規則溢出：隱藏;和寬度：100％; （刪除寬度：自動;從懸停規則），並添加到您的李規則位置：相對;似乎這樣做。 – wunth

您可以在多條線路設置word-wrap到break-word打破了字。

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    position: absolute; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    float: left; 
 
    margin-right: 1px; 
 
} 
 

 
li a { 
 
    display: block; 
 
    width: 100px; 
 
    min-height: 50px; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    color: #fff; 
 
    background: #2f3036; 
 
    text-decoration: none; 
 
    word-wrap: break-word; 
 
} 
 

 
li:hover a { 
 
    background: #97455f; 
 
} 
 

 
li:hover ul a { 
 
    background: grey; 
 
    color: #2f3036; 
 
    min-height: 40px; 
 
    line-height: 40px; 
 
    text-align: center; 
 
} 
 

 
li:hover ul a:hover { 
 
    background: #97455f; 
 
    color: #fff; 
 
} 
 

 
li ul { 
 
    display: none; 
 
} 
 

 
li ul li { 
 
    display: block; 
 
    float: none; 
 
} 
 

 
.hidden { 
 
    padding: 0; 
 
} 
 

 
ul li a:hover+.hidden, 
 
.hidden:hover { 
 
    display: block; 
 
    width: auto; 
 
} 
 

 
@media screen and (max-width: 460px) { 
 
    ul { 
 
    position: static; 
 
    display: none; 
 
    } 
 
    li { 
 
    margin-bottom: 1px; 
 
    } 
 
    ul li, 
 
    li a { 
 
    width: 100%; 
 
    } 
 
    .show-menu { 
 
    display: block; 
 
    } 
 
}

<ul class="menu"> 
 
    <li><a href="#">Somthing</a></li> 
 
    <li> <a href="#">something</a> 
 
    <ul class="hidden"> 
 
     <li><a class href="#">somethoingaaaaaaaaaaaaaaaaaaaaa</a></li> 
 
     <li><a class href="#">something</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

來源

2017-08-11 00:08:14 kdureidy

如何在父母的下拉菜單中保留子標題的寬度？

回答

相關問題