0

ここにデモがありますwww.ttmt.org.uk/nav

ドロップダウンを使用したシンプルなリスト ナビゲーションです。

「私たちの仕事」ドロップダウンには、最後のボタンに別のドロップダウンがあります。

ドロップ ダウンは親ボタンよりも幅が広いですが、「Our Work」の最後のボタンの下のドロップはテキストに対して十分な幅がありません。

これらのボタンの幅が十分でないのはなぜですか。

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

width: 100%;このセレクターに追加できますnav ul ul ul。したがって、uls は少なくとも同じ幅になります。

Ps は、いくつかのクラスを html に追加してみてください。これにより、長くて遅いセレクターがなく、次のようにnav ul ul ul直接アドレス指定できます。.submenu

于 2013-09-02T14:47:30.617 に答える
1

CSSに追加するだけ

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