Question

我在这里有一个演示www.ttmt.org.uk/nav

这是一个带下拉列表的简单列表导航

“我们的工作”下拉列表中的最后一个按钮会再次下拉。

下拉菜单比父按钮更宽，但“我们的工作”最后一个按钮下的下拉不足以支持文本。

为什么这些按钮不够宽。

    <!DOCTYPE html>
    <html lang="en">
      <meta charset="UTF-8">  

      <!--css-->
      <style>

        body{
            background:#eee;
            font-family:helvetica, sans-serif;
        }
        nav{
            margin:50px;
            float:left;
        }

        nav ul ul{
            display:none;
        }
        nav ul li:hover > ul{
            display:block;
        }
        nav ul{
            list-style:none;
            position:relative;
            display:inline-table;
        }
        nav ul:after {
            content: "";
            clear: both; 
            display: block;
        }

        nav ul li{
            float:left;
        }
        nav ul li a{
            display:block;
            padding:20px;
            text-decoration:none;
            background:#fff;
            color:red;
            margin:0 5px 0 0;
            position:relative;
        }
        nav ul li a span{
            display:inline-block;
            width:14px;
            height:7px;
            background:blue;
            position:absolute;
            bottom:10px;
            left:50%;
            margin-left:-7px;
        }
        nav ul ul{
            padding:0;
            position:absolute;
            top:100%;
        }
        nav ul ul li{
            float:none;
            position:relative;
        }
        nav ul ul li a{
            background:red;
            color:#fff;
            margin:0 0 5px 0;
        }
        nav ul ul ul{
            position:absolute;
            left:100%;
            top:0;
        }

      </style>


      <title>Title of the document</title>
      </head>

    <body>

      <nav>
        <ul>
          <li><a href="#">Home<span></span></a></li>
          <li><a href="#">About Us ><span></span></a>
            <ul>
              <li><a href="#">About Us Bigger Button</a></li>
              <li><a href="#">About Us Us</a></li>
              <li><a href="#">About Us Us Us</a></li>
              <li><a href="#">About Us Us Us Us</a></li>
            </ul>
          </li>
          <li><a href="#">Our Work ><span></span></a>
            <ul>
              <li><a href="#">Our Work One</a></li>
              <li><a href="#">Our Work Two</a></li>
              <li><a href="#">Our Work Three ></a>
                <ul>
                  <li><a href="#">Our Work Three Sub Button</a></li>
                  <li><a href="#">Our Work Three Another Sub Button</a></li>
                </ul>  
              </li>
            </ul>
          </li>
          <li><a href="#">Contact<span></span></a></li>
        </ul>
      </nav>


    </body>

    </html>

Answer 1

只需添加到您的CSS

nav ul ul ul {
      width: 200px; /* example width */
}

Answer 2

您可以将width: 100%;添加到此选择器nav ul ul ul。因此 - ul s至少具有相同的宽度。

P.S。尝试在你的html中添加一些类，这样你就没有像nav ul ul ul这样长而慢的选择器，可以像.submenu

那样直接寻址

下拉菜单宽度

2 个答案: