0

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

这里是：

http://jsfiddle.net/5DWer/

那里有“菜单包装器”，但它不是我上面提到的包装器。包装器就在“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;
}
4

2 回答 2

0

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

于 2013-04-25T23:38:48.270 回答
0

这是您问题的解决方案：（我添加了第三个子选项卡以显示它有效）

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>

又不在礼外。

供参考（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;
}
于 2013-04-29T01:30:51.663 回答