Question

我在包装器中制作水平菜单和子菜单（2级）。请想象一下这个菜单位于页面/包装器的右上角。问题是，由于子菜单也是水平的，它可能（将）太宽并且会在包装器外溢出。

这是：

那里有“menu-wrapper”，但它不是我上面提到的包装器。包装器位于“Tab 3”之后，因此“Tab 3 sub 2”位于包装器之外。

我认为解决方案是让第二级菜单从第一级以下的同一点开始，这样它就永远不会在包装器之外流动（假设第一级足够宽）。在小提琴链接中：“tab 3 sub 1”从“tab 1”正下方开始。我不能只使用margin-left或left因为我不知道子菜单将在哪个选项卡下启动。

这可能还是有其他解决方案？如果可能的话，在纯CSS中，但如果不是，我会使用Javascript。

提前致谢：）

感谢您的解释。对不起，这是代码：

<div class="menu-wrapper">
    <ul class="menu">
        <li>tab 1</li>
        <li>tab 2</li>
        <li>tab 3</li>
           <ul>
               <li>tab 3 sub 1</li>
               <li>tab 3 sub 2</li>
           </ul>
     </ul>
</div>

和CSS

.menu-wrapper {
    width: 100%;
}
.menu {
    max-width: 450px;
    float: right;
}

.menu li a,
.menu li {
    display: inline-block;
    text-decoration: none;
}

.menu li:hover > ul {
    display: block;
}
.menu li ul {
    display: none;
    width: 404px;
    position: absolute;
} 

.menu li li{
    width: 200px;
    margin: 0;
}

.menu li ul ul {
    top: 100%;
    left: 50%; 
    width: 200px;
}
.menu ul li:hover > ul {
    border-left: 0;
    display: block;
}
.menu li ul li a {
    display: block;
    padding: 8px 10px;
    padding: 0.571428571rem 0.714285714rem;
    width: 180px;
    width: 12.85714286rem;
    white-space: normal;
}

Answer 1

查看您的代码，它似乎按预期运行。在我看来，从我所看到的（给出浮点数：例如），这更像是一个ui /设计问题，而不是代码问题。如果没有，也许您可以提供有关实际设计的更多详细信息，以便我可以提供css解决方案。

Answer 2

这是您的问题的解决方案:(我添加了第3个子标签以显示它有效）

http://jsfiddle.net/5DWer/3/

但是，就像我在小提琴中提到的那样评论：您必须手动指定第二级ul的宽度。

此外，您必须正确嵌套第二级，如下所示：

<div class="menu-wrapper">
    <ul class="menu">
        <li>tab 1</li>
        <li>tab 2</li>
        <li>tab 3
           <ul>
               <li>tab 3 sub 1</li>
               <li>tab 3 sub 2</li>
           </ul>
        </li>
     </ul>
</div>

而不是在li之外。

供参考（jsfiddle代码）： HTML：

<div class="menu-wrapper">
    <ul class="menu">
        <li>tab 1</li>
        <li>tab 2</li>
        <li>tab 3
           <ul>
               <li>tab 3 sub 1</li>
               <li>tab 3 sub 2</li>
               <li>tab 3 sub 3</li>
           </ul>
        </li>
     </ul>
</div>

和CSS：

.menu-wrapper {
    width: 100%;
}
.menu {
    max-width: 450px;
    float: right;
}
.menu li {
    display: inline-block;
    text-decoration: none;
    font-family: Arial, sans-serif;
    background-color: yellow;
    width: 50px;
    height: 20px;
    text-align: center;
}
.menu li ul {
    display: none;
    width: 500px;  /* caveat : you have to specify the width manually */
    margin-top: 10px;
}
.menu li:hover ul {
    display: block;
    float: right;
}
.menu li ul li {
    float: right;
    background-color: orange;
    height: 100%;
}
.menu li ul li a {
    padding: 8px 10px;
    padding: 0.571428571rem 0.714285714rem;
    width: 180px;
    width: 12.85714286rem;
    white-space: normal;
}

CSS子菜单与其父级一样宽

2 个答案: