Question

在CSS中，我是浮动的嵌套列表集，以便创建下拉菜单。但是，标题并不像其下拉菜单中的许多项目那样宽，因此标题最终会不成比例地间隔（因为它们的每个下拉组件具有不同的宽度 - 显然列表与其最宽的组件一样宽）。有没有人对如何解决这个问题有任何建议？

这是我的代码：

<body>

    <ul id="navigation">

     <li><a href="#">Header A</a></li>
     <li class="sub">

      <a href="#">Header B</a>

      <ul>

       <li><a href="#">Item AAAAAAAAAAAA</a></li>
       <li><a href="#">Item BBBBBBBBBBBB</a></li>
       <li><a href="#">Item CCCCCCCCCCCC</a></li>
       <li><a href="#">Item DDDDDDDDDDDD</a></li>
       <li><a href="#">Item EEEEEEEEEEEE</a></li>
      </ul>

     </li>

     <li>
      <a href="#">Header C</a>
     </li>

    </ul>

</body>

这是CSS：

    body {

    padding: 0;
    margin: 0;

    }


 #navigation {
 margin: 0;
 padding: 0 1em;
 background: #000;
 height: 3em;
 list-style: none;
 font-family: "Helvetica Neue";
    } 

#navigation > li {
 float: left;
 height: 100%;
 margin-right: 0.5em;
 padding: 0 1em;
}

#navigation > li > a {
 color: #7A7A7A;
 text-decoration: none;
 line-height: 3;
 font-weight: bold;
}

#navigation > li > a:hover {
    color: #FFFFFF;
}

#navigation > li.sub ul {
 margin: 0;
 padding: 0.5em 0;
 list-style: none;
 background: rgba(12,13,69,1);
 position: relative;
 top: 10000px;
}

#navigation > li.sub ul li a {
 height: 100%;
 display: block;
 padding: 0.4em;
 color: #fff;
 font-weight: bold;
 text-decoration: none;
}

#navigation > li.sub ul li a:hover {
 background: #00F2FF;
 text-decoration: none;
}

#navigation > li.sub:hover ul {
 display: block;
 top: 0px;
}

Answer 1

如果没有看到您的代码，就无法说明您的具体案例中发生了什么。

但这是一个有效的例子：http://jsfiddle.net/kboucher/nrAPu/

HTML

<nav>
    <ul>
        <li>
            Menu One
            <ul>
                <li>
                    <a href="#">Menu One Item One</a>
                    <ul>
                        <li><a href="#">Menu One Item One Submenu Item One</a></li>
                        <li><a href="#">Menu One Item One Submenu Item Two</a></li>
                        <li><a href="#">Menu One Item One Submenu Item Three</a></li>
                        <li><a href="#">Menu One Item One Submenu Item Four</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu One Item Two</a></li>
                <li><a href="#">Menu One Item Three</a></li>
                <li><a href="#">Menu One Item Four</a></li>
            </ul>
        </li>
        <li>
            Menu Two
            <ul>
                <li><a href="#">Menu Two Item One</a></li>
                <li><a href="#">Menu Two Item Two</a></li>
                <li><a href="#">Menu Two Item Three</a></li>
                <li><a href="#">Menu Two Item Four</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS

body { font-family: Helvetica, Arial, Sans-serif; line-height: 1.5em; }
a:hover { color: #cc0000; }

/* Hide submenu */
nav ul > li > ul,
nav ul > li > ul > li > ul { display:none; }

/* Layout menubar and menus */
nav { background:#ddd; padding:0.25em 0.5em; }
nav > ul > li { cursor: pointer; display:inline-block; padding:0 1em; }
nav > ul > li > ul { background: #ddd; padding:0.5em; position: absolute; z-index: 1000; }
nav > ul > li > ul > li > ul { background: #ccc; padding:0.5em; position: absolute; left: 90%; top: 0; z-index: 1001; }

/* show submenu on hover */
nav ul > li:hover > ul,
nav ul > li > ul > li:hover > ul { display:block; width:10em; }

CSS浮动和嵌套列表

1 个答案: