Question

我正在尝试对此导航栏进行编码，但仍遇到此问题，我无法根据文本长度扩展子菜单的背景/边框。

  
*{margin:0;padding:0}
#navbar{max-width:900px;width:100%;clear:both}
#navbar ul{border-top:#e82424 dashed 1px;border-bottom:#e82424 dashed 1px;background:#eee;width:100%;list-style:none;position:relative;float:left}
#navbar ul a,#navbar ul ul a{display:block;color:#000;text-decoration:none;font-size:16px;padding:5px 10px}
#navbar ul li{position:relative;float:left}
#navbar ul li.current-menu-item{background:#ddd}
#navbar ul li:hover{background:#f6f6f6}
#navbar ul ul{white-space:nowrap;min-width:100%;border:#e82424 dashed 1px;display:none;position:absolute;top:100%;left:0}
#navbar ul ul li{float:none}
#navbar ul ul ul{top:0;left:100%}
#navbar ul li:hover > ul{display:block}

  <div id="navbar">
    <ul>
      <li class="current-menu-item"><a href="#">Menu 1</a></li>
      <li><a href="#" rel="nofollow">Menu 2</a>
        <ul>
          <li><a href="#" rel="nofollow">Sub Menu 1</a></li>
          <li><a href="#" rel="nofollow">Sub Menu 2 (Making it little longer)</a>
            <ul>
              <li><a href="#" rel="nofollow">Deep Menu 1</a></li>
              <li><a href="#" rel="nofollow">Deep Menu 2</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#" rel="nofollow">Menu 3</a>
        <ul>
          <li><a href="#" rel="nofollow">Sub Menu 1</a></li>
          <li><a href="#" rel="nofollow">Sub Menu 2</a></li>
        </ul>
      </li>
      <li class="last-menu-item"><a href="#" rel="nofollow">Menu 4</a></li>
    </ul>
  </div>

http://jsbin.com/xogebiv/edit?html,output

我将不胜感激任何建议。感谢

Answer 1

更改此行：

#navbar ul{
   border-top:#e82424 dashed 1px;
   border-bottom:#e82424 dashed 1px;
   background:#eee;
   width:100%;
   list-style:none;
   position:relative;
   float:left
}

到

#navbar > ul{
   border-top:#e82424 dashed 1px;
   border-bottom:#e82424 dashed 1px;
   background:#eee;
   width:100%;
   list-style:none;
   position:relative;
   float:left
}

基本上，不要将宽度：100％应用于所有ul，而只应用第一个孩子。

以下是一个工作示例：http://jsbin.com/suvizoqiwi/1/edit?html,output

无法获取下拉菜单背景在Navbar中按文本长度扩展

1 个答案: