css - 如果文本长于多级 liSTLess 下拉导航菜单中的宽度，如何让 block 更改宽度

Question

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

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

如果您将鼠标悬停在 initiative tracker 上，然后在 encounters 上方，您将看到名为“排序测试”的第二个链接，“测试”一词不在漂亮的 block 中，而是在其下方。

如何让 block 增加宽度(对于特定下拉列表中的所有链接)以适合文本？

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