如何获得块更改宽度，如果文本更长，然后在多级无链接下拉菜单中的宽度导航菜单

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