0

我在这里有一个演示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>
4

2 回答 2

1

只需添加到您的 CSS

nav ul ul ul {
      width: 200px; /* example width */
}
于 2013-09-02T13:18:59.970 回答
1

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

Ps 尝试在你的 html 中添加一些类，这样你就没有这么长和这么慢的选择器，nav ul ul ul并且可以像这样直接寻址.submenu

于 2013-09-02T14:47:30.617 回答