如果文本长于多级无精打采下拉导航菜单中的宽度，如何让块更改宽度

Question

我有一个无精打采的多级下拉菜单。我有一个问题，如果 link 的文本较长，则块的宽度和高度不会扩展，并且 link 的一部分在框外。

我在 https://jsfiddle.net/JoeyD473/x57d8jbg

有一个 JSFiddle 设置

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

如果您将鼠标悬停在主动跟踪器上，然后在遇到的情况下，您会看到第二个 link 称为 "Sort Test"，单词 "Test" 不在漂亮的块中，而是在其下方。

如何让块增加宽度（对于特定下拉列表中的所有 link）以适合文本？

是的，我正在使用 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;
}

如果文本长于多级无精打采下拉导航菜单中的宽度，如何让块更改宽度

How to get block to change width if text is longer then the width in a multilevel listless drop down navigation menu

css

nav

navbar