菜单（子菜单）需要动态而不是静态

我有一个纯粹的.css驱动菜单。目前，我在子子菜单上弹出出现在180像素处。这显然不起作用，因为只要输入的菜单文本超过180像素，子菜单文本就会覆盖子子菜单文本（在示例中，突出显示产品>美国娱乐中心显示该问题）。菜单（子菜单）需要动态而不是静态

.css中我明确指出180px宽度的地方在下面。我需要它是动态的，即，无论第一级子菜单的宽度如何，所需行为都是为了使弹出窗口与第一级垂直菜单的右侧对齐。

/* -- Appearance of second vertical dropdown menu unhovered (submenu of first level vertical menu) -- */ 
.rmenu li ul li:hover ul li a { 
    padding: 0px 0px 0px 5px; 
    background: #e8dec7; /*background color for submenu hovered text*/ 
    color: #51db29; /* this is the color of the sub-sub menu text. I made the color (#51db29) 'unusual' as an example. Should be changed to something less jarring (of course) */ 
    word-wrap: break-word; 
    min-width:100px; 
    position: relative; left: 180px; top: -35px; /* display 3rd level to the right (180px) */ /*left: 180px*/ 

}

的jfiddle是在这里：

http://jsfiddle.net/9c8wcxju/4/

很多，非常感谢.....

来源

2015-02-04 user3340470

您需要包括菜单的期望的行为。动态是非常模糊的，你目前的小提琴不会做任何事情 – Huangism

小提琴完全适合我，并显示所述的问题。我已经打电话给另一个用户，他也可以查看小提琴。也许将中心垂直分频器移动到左边会有帮助吗？我已经进一步描述了上面的期望行为。谢谢。 – user3340470

确定链接是正确的？我使用Mac FF，当我将鼠标悬停在米色栏上时，没有任何反应。同样的事情在铬 – Huangism

我已经简化都记录下来并提出这个要求。你可以扩展它，并做它你想要的。我无法真正与你合作，最终删除了大部分的CSS。

正如您所看到的，我已将类添加到子菜单的每个级别，因此更容易定位。我所创造的是我认为你想要的，我希望这会让你走上正轨。

http://jsfiddle.net/9c8wcxju/5/

.rmenu ul li { 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 

.rmenu ul { 
    list-style-type:none; 
    margin:0; 
    padding:0; 
} 

.rmenu li a { 
    display:block; 
    min-height: 35px; 
    line-height: 35px; 
    font-family: "Arial", sans-serif; 
    font-size: 18px; 
    color: #000000; 
    background-color: #e8dec7; 
    text-decoration: none; 
    white-space: nowrap; 
} 
.rmenu li:hover a { 
    background: #d6cbb0; 
} 
.rmenu .hidden { 
    display: none; 
} 

.rmenu .level_1 > li { 
    float: left; 
} 
.rmenu .level_1 > li a { 
    padding: 0 10px; 
} 

.level_1 > li:hover .level_2, 
.level_2 > li:hover .level_3 { 
    display: block; 
} 

.level_2 { 
    position: absolute; 
    left: 0; 
} 
.level_3 { 
    position: absolute; 
    top: 0; 
    left: 100%; 
}

来源

2015-02-05 14:16:03 Huangism

非常感谢。这看起来非常好，并解决了这个问题。我也按照你的建议重写了css，虽然你的解决方案更加优雅，所以我即将把你的解决方案放在原地。我真的很感激你投入的时间。现在我必须让响应部分工作...... :)祝你有美好的一天！ – user3340470

菜单（子菜单）需要动态而不是静态

回答

相关问题