Wie Block erhalten, Breite zu ändern, wenn Text länger ist als die Breite in einem mehrstufigen lustlosen Dropdown-Navigationsmenü

Question

Ich habe ein lustloses mehrstufiges Dropdown-Menü. Ich habe ein Problem, dass, wenn der Text der Verbindung länger als die Breite ist, die Höhe des Blocks nicht erweitert wird und ein Teil der Verbindung außerhalb der Box ist.

Ich habe einen JSFiddle Setup für sie bei 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; 
} 

Wenn Sie Initiative Tracker schweben über und die dann über Begegnungen werden Sie den zweiten Link namens "sortieren Test" sehen Das Wort "Test" ist nicht in dem schönen Block, sondern darunter.

Wie kann ich den Block die Breite (für alle Links in diesem bestimmten Dropdown) zu erhöhen, um den Text anzupassen?

Ja ich benutze Bootstrap, aber ich mag nicht ihre Dropdown, weil es nur eine Ebene ist und ich wollte die Möglichkeit unbegrenzt Dropdown-Ebenen und die Lösungen, die ich sah alle benötigten Javascript und ich wollte es streng sein CSS basiert. Und obwohl es sollte keine Rolle, sondern nur das Backend für den Fall verwendet Laravel 5.2

Answer 1

Fügen Sie diese in Ihre Codes ändert das heißt fügen Sie einfach width von 100% zu .nav_ul_hidden

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