如何獲得塊更改寬度，如果文本更長，然後在多級無鏈接下拉菜單中的寬度導航菜單

Question

我有一個無鏈接的多級下拉菜單。我有一個問題，如果鏈接的文本更長，則塊的高度寬度不會擴大，部分鏈接不在框中。

我有一個的jsfiddle設置爲它在https://jsfiddle.net/JoeyD473/x57d8jbg

<!-- HTML --> 
<nav role="navigation" id="mainNavigationBar" class="nav_ul_1"> 
<div class="nav_li"> 
    <a href="/dnd_tools" class="nav_links">Home</a> 
</div> 
<div class="nav_li"> 
     <a href="/dnd_tools/initiative_tracker" class="nav_links">Initiative Tracker <span class="glyphicon glyphicon-menu-down"></span></a> 
    <div class="nav_ul_hidden"> 
    <div class="nav_li"> 
     <a href="/dnd_tools/initiative_tracker" class="nav_links">Encounters <span class="glyphicon glyphicon-menu-right"></span></a> 
     <div class="nav_ul_hidden"> 
     <div class="nav_li"> 
      <a href="initiative_tracker/encounter/1">Test</a> 
     </div> 
     <div class="nav_li"> 
      <a href="initiative_tracker/encounter/2">Sort Test</a> 
     </div> 
     </div> 
    </div> 
    <div class="nav_li"> 
     <a href="/dnd_tools/initiative_tracker/create_encounter" class="nav_links">Create Encounter</a> 
    </div> 
    </div> 
</div> 
<div class="nav_li"> 
    <a href="/logout" class="nav_links">Logout</a> 
</div> 
    </nav> 

CSS

#mainNavigationBar 
{ 
    z-index:9999; 
    height:50px; 
    background:linear-gradient(to bottom, #28343B 8%, #828C95 65%, #B5BDC8 100%); 
    border:solid 1px #000000; 
} 

#mainNavigationBar > .nav_li 
{ 
    padding:0 10px 0 10px; 
} 

#mainNavigationBar > .nav_li > a 
{ 
    color:rgb(12, 81, 46); 
    font-size:1.25em; 
    font-weight:bold; 
} 

.nav_li 
{ 
    display:inline-block; 
    position:relative; 
    height:49px; 
    vertical-align:middle; 
    line-height:49px; 
    z-index:9999; 
} 

.nav_ul_1 .nav_ul_hidden 
{ 
    position:absolute; 
    display:none; 
    color:rgb(12, 81, 46); 
} 

.nav_ul_1 .nav_ul_hidden a 
{ 
    color:rgb(12, 81, 46); 
    font-size:1em; 
    font-weight:bold; 
} 

.nav_ul_1 .nav_ul_hidden .nav_li 
{ 
    padding:0 10px 0 10px; 
    background:linear-gradient(to bottom, #28343B 8%, #828C95 65%, #B5BDC8 100%); 
    color:rgb(12, 81, 46); 
    min-width:100%; 
    min-height: 49px; 
    margin-top:10px; 
    border-radius:25px 25px 25px 25px; 
    border:rgb(12, 81, 46) 1px outset; 
    box-shadow:5px 5px 10px 0 #0F0F0F; 
} 

.nav_ul_1 .nav_ul_hidden .nav_li:first-child 
{ 
    padding:0 10px 0 10px; 
    color:#000000; 
    width:100%; 
    margin-top:-10px; 
    border-radius:25px 25px 25px 25px; 
    box-shadow:5px 5px 10px 0 #0F0F0F; 
} 

.nav_ul_1 .nav_ul_hidden .nav_li .nav_ul_hidden .nav_li 
{ 
    margin-left:10px; 
} 

.nav_ul_1 .nav_ul_hidden .nav_li .nav_ul_hidden .nav_li:first-child 
{ 
    color:rgb(12, 81, 46); 
    margin-left:10px; 
    margin-top: 0; 
} 

.nav_li:hover > .nav_ul_hidden 
{ 
    display:block; 
} 

.nav_ul_hidden .nav_ul_hidden 
{ 
    left:100%; 
    top:0; 
} 

如果你將鼠標懸停在主動跟蹤和然後在遇到你會看到一個名爲「排序測試」第二個鏈接「測試」這個詞不在好看的區塊中，而是低於它。

如何獲得塊以增加寬度（適用於該特定下拉列表中的所有鏈接）以適應文本？

是的我使用Bootstrap，但我不喜歡他們的下拉，因爲它只有一個級別，我想無限下拉級別的可能性和解決方案，我看到所有必需的Javascript，我希望它是嚴格的基於CSS。雖然它不應該的問題，但爲了以防萬一後端使用Laravel 5.2

Answer 1

添加這改變了你的代碼，即只需添加的100%width到.nav_ul_hidden

.nav_ul_1 .nav_ul_hidden 
{ 
    position:absolute; 
    display:none; 
    color:rgb(12, 81, 46); 
    width:100%; 
    height:auto; 
}