CODEWITHSUNDEEP
jqueryhtmlcss
user1037763
user1037763

Reputation: 131

vertical navigation collapsing and expanding

hi I'm trying to create a vertical navigation bar as can be found as a jsfiddle The navigation bar is meant to expand and collapse while using css/jquery. I'm lost in the css as while expanding the sub menu's don't appear at the bottom where I expected them but on the right?

.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;
}

Can someone give me a hint about where I'm messing up?

Gert

Upvotes: 1

Views: 944

Answers (3)

bbennett
bbennett

Reputation: 379

It may be overkill, but jQuery's accordion behaves this way: http://jqueryui.com/accordion/

Upvotes: 0

Blazemonger
Blazemonger

Reputation: 92893

This is because .csm div is set to float: left.

Remove that, and the submenus will appear below them as desired -- although you may have to tweak the rest of your CSS to make it look consistent.

Upvotes: 0

Adween
Adween

Reputation: 2820

Is this better http://jsfiddle.net/kfLaZ/1/

I changed the following

.csm div

to 

.csm li

Upvotes: 2

Related Questions