How to create a nested vertical menu with horizontally sub-menus using css

Question

I want to change a list to be vertical but after changing a lot of css code the inside list that should go horizontal is going vertical and i cant find why.

nav ul ul { display: none;}

nav ul li:hover > ul {  display: block; }

nav ul {
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 20px;
    border-radius: 10px;  
    list-style: none;
    position: relative;
    display:list-item;
    }
    nav ul:after {
        content: ""; clear: both; display: block;
    }
    nav ul li {
    float: left;
}

nav ul li:hover {
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}

nav ul li:hover a {
    color: #fff;
}

nav ul li a {
    display: block; padding: 25px 40px;
    color: #757575; text-decoration: none;
}

nav ul ul {
    background: #5f6975; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
}

nav ul ul li {
    display:list-item;
    float: right; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
}

nav ul ul li a {
    padding: 15px 40px;
    color: #fff;
}   

nav ul ul li a:hover {
    background: #4b545f;
}

nav ul ul ul {
    position: absolute; left: 100%; top:0;
}

And this is the html markup:

<nav>
    <ul>
        <li>
            <a href="Documents.php">Products</a>
            <ul>
                <li><a href="Documents.php?cat=Political">Books</a></li>
                <li><a href="Documents.php?cat=History">Magazines</a></li>
                <li><a href="Documents.php?cat=Culture">MusicCd's</a></li>
            </ul>
        </li>
        <li><a href="html/about.html">ABOUT</a></li>
        <li><a href="html/contact.html">CONTACT</a></li>
    </ul>
</nav>

Arash Milani · Accepted Answer · 2012-12-30 19:28:45Z

3

So you want the parent menu items to be positioned vertically (go down each other) and the nested sub-menus to be positioned horizontally (to go to left of each other).

suppose it's our html markup:

<nav>
    <ul>
        <li>Parent 1
            <ul>
                <li>Child 1</li>
                <li>Child 2</li>
                <li>Child 3</li>
            </ul>
        </li>
        <li>Parent 2
            <ul>
                <li>Child 4</li>
                <li>Child 5</li>
                <li>Child 6</li>
            </ul>
        </li>
    </ul>
</nav>

to position the parent menu items we just tell them to clear their left. so no element can be floated to their right:

nav > ul > li {
    clear: left;
}

(also note that to specify only the parent menu item we have used > the Child combinator. so this style will not effect inner lis. only parent lis get that css property.)

Then we hide the sub-menu items and let them only appear only on mouse over:

nav > ul > li ul {
    display: none;   
}

nav > ul > li:hover ul {
    display: block;
}

the last thing is to tell the sub-menu items to be floated to left and to be displayed as inline elements. so this way we get the desired horizontally oriented sub-menu items.

nav > ul > li ul li {
    float: left;
    display: inline-block;
}

and here we come to tricky part of positioning sub-menu relative to parent. to do so we use absolute positioning for children and set the position:relative for their parent so the children get positioned relative to this parent not the global parent that is body element

nav > ul > li {
    position: relative;
}

nav > ul > li ul {
    position: absolute;
    left: 100px;
    top: 0;
}

here is a working demo: http://jsfiddle.net/VCX7T/6/ and this is complete css code:

nav > ul > li {
    clear: left;
    position: relative;
}

nav > ul > li ul {
     display: none;   
}

nav > ul > li:hover ul {
    display: block;
}

nav > ul > li ul {
    position: absolute;
    left: 100px;
    top: 0;
}


nav > ul > li ul li {
    float: left;
    display: inline-block;
}

edited Dec 30, 2012 at 19:28

answered Dec 30, 2012 at 18:28

Arash Milani

6,3282 gold badges46 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ant Mar Over a year ago

the > at the css code means? for exmaple nav>ul>li ul li means inside nav inside ul the li ul li?

Arash Milani Over a year ago

here is a detailed answer: http://stackoverflow.com/questions/3225891/what-does-mean-in-css-rules

Arash Milani Over a year ago

:) great happy to hear that. also please consider deleting any chatty and unneeded comments above. if you think it don't need to be here for feature visitors of the question.

Collectives™ on Stack Overflow

How to create a nested vertical menu with horizontally sub-menus using css

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related