Question

嗨我正在尝试创建一个垂直导航栏，可以找到jsfiddle导航栏用于在使用css / jquery时展开和折叠。我在css中迷失了，因为扩展子菜单时没有出现在我预期的底部但是在右边？

.csm {
    list-style: none;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

.csm div {
text-align: right;
float: left;
display: block;
cursor: pointer;
background-color: #D3EDFB;
width: 95%;
max-width: 27em;
}

ul.csm {
   display: block;
   list-style: none;
   margin: 0;
   padding: 0;
   text-align: right;
}

.csm ul {
    display: none;
}

.csm ul li {
    display: block;
    cursor: auto;
}

.csm a {
    background-color: #D3EDFB;
    display: block;
}

有人能给我一个暗示我搞砸了的地方吗？

格特

Answer 1

这是更好的http://jsfiddle.net/kfLaZ/1/

我更改了以下内容

.csm div

到

.csm li

Answer 2

这是因为.csm div设置为float: left。

删除它，子菜单将根据需要显示在它们下面 - 尽管您可能需要调整CSS的其余部分以使其看起来一致。

Answer 3

这可能有点矫枉过正，但jQuery的手风琴就是这样的：http://jqueryui.com/accordion/

垂直导航折叠和扩展

3 个答案: