菜单(子菜单)需要动态而不是静态

时间:2015-02-04 19:20:24

标签: css drop-down-menu menu

我有一个纯粹的.css驱动菜单。目前,我在子子菜单上的弹出按钮出现在180px。这显然不起作用,因为只要输入超过180px的菜单文本,子菜单文本就会覆盖子子菜单文本(在示例中,突出显示产品>美国娱乐中心显示问题)。

.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/

很多,非常感谢.....

1 个答案:

答案 0 :(得分:0)

我已将所有内容简化下来并为您完成此操作。你可以扩展它并用它做你想做的事情。我无法真正与你合作,最终删除了大部分的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%;
}