CODEWITHSUNDEEP
htmlcssdrop-down-menu
user1896653
user1896653

Reputation: 3327

How to put horizontal dropdown menu bar

I've faced a problem putting a horizontal sub menu bar. Basically, I can do vertical dropdown menubar, But I haven't any idea how to make horizontal dropdown menu bar. This is what I can: http://jsfiddle.net/eSxT9

But I need this: https://www.dropbox.com/s/idx2r5bkbuzd1t0/horizonatl-sub-menubar.png

I want to do with CSS. I thought, I would have to change this code:

.nav ul ul {
        position: absolute;
        left: 0;
        right: 0;
        display: none;
        z-index: 5; 
    }

I removed left:0, right: 0, gave width 100%. But, it won't work. I can't get the idea what should I do. Please, help me.

Upvotes: 0

Views: 142

Answers (2)

verbanicm
verbanicm

Reputation: 2526

Give a width to the inner UL and float the LI for that inner UL http://jsfiddle.net/eSxT9/1/

.nav ul ul {
    position: absolute;
    width:1000px;
    left: 0;
    right: 0;
    display: none;
    z-index: 5; 
}
.nav ul ul li {
    float:left;
    margin: 0;
}

Upvotes: 1

Kevin Lynch
Kevin Lynch

Reputation: 24723

You need to use display: inline for that particular <ul>

Heres a simmilar example of the logic http://jsfiddle.net/kevinPHPkevin/te5AU/268/

Upvotes: 0

Related Questions