CODEWITHSUNDEEP
cssdrop-down-menu
user370306
user370306

Reputation:

Vertical 3-level dropdown menu

I have a problem with a vertical css menu with 3-level submenus.The last submenu isn't aligned as it should be and I don't know where's the problem.

Here's a demo http://jsfiddle.net/pPckk/1/ And if You can't open jsfiddle, here's the code:

<div id="global-nav">
        <ul class='parent'>
            <li class="smt"><a href="#">cat1</a></li>

            <li class="c1">
                <ul class='child child1'>
                    <li class="smt"><a href="#">cat1.1</a></li>

                    <li class="smt"><a href="#">cat1.2</a></li>

                    <li class="c1">
                        <ul class='child child2'>
                            <li class="smt"><a href="#">cat1.2.1</a></li>

                            <li class="c1">
                                <ul class='child child3'>
                                    <li class="smt"><a href="#">cat1.2.1.1</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>

                    <li class="smt"><a href="#">cat1.3</a></li>

                    <li class="smt"><a href="#">cat1.4</a></li>
                </ul>
            </li>

            <li class="smt"><a href="#">cat2</a></li>

            <li class="c1">
                <ul class='child child1'>
                    <li class="smt"><a href="#">cat2.1</a></li>
                </ul>
            </li>
        </ul>
    </div>
#nav, #nav ul {
    line-height: 1.5em;
    list-style-position: outside;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
}
#nav a:link, #nav a:active, #nav a:visited {
    background-color: #333333;
    border: 1px solid #333333;
    color: #FFFFFF;
    display: block;
    padding: 0 5px;
    text-decoration: none;
}
#nav a:hover {
    background-color: #FFFFFF;
    color: #333333;
}
#nav li {
    position: relative;
    width: 100px;
}
#nav ul {
    display: none;
    left: 100px;
    position: absolute;
    width: 192px;
    top:0;
}
#nav li ul a {
    float: left;
    width: 192px;
}
#nav ul ul {
    top:0;
}
#nav li ul ul {
    left: 192px;
    top:25px;
    margin: 0 0 0 13px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul {
    display: none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
    display: block;
}

Upvotes: 1

Views: 5596

Answers (2)

Fahim Parkar
Fahim Parkar

Reputation: 31647

Just add 

#nav li ul ul ul {
    left: 192px;
    top:0px;
    margin: 0 0 0 13px;
}

and you are done...

Below is what I have and it is working perfect... Yipee!!! I did it first time and worked!!!

<html>
<head>
<style>
#nav, #nav ul {
    line-height: 1.5em;
    list-style-position: outside;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
}

#nav a:link, #nav a:active, #nav a:visited {
    background-color: #333333;
    border: 1px solid #333333;
    color: #FFFFFF;
    display: block;
    padding: 0 5px;
    text-decoration: none;
}

#nav a:hover {
    background-color: #FFFFFF;
    color: #333333;
}
#nav li {
    position: relative;
    width: 100px;
}

#nav ul {
    display: none;
    left: 100px;
    position: absolute;
    width: 192px;
    top:0;
}

#nav li ul a {
    float: left;
    width: 192px;
}

#nav ul ul {
    top:0;
}

#nav li ul ul {
    left: 192px;
    top:25px;
    margin: 0 0 0 13px;
}

#nav li ul ul ul {
    left: 192px;
    top:0px;
    margin: 0 0 0 13px;
}


#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display: none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
    display: block;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">cat1</a><ul class="jaccordion">
<li><a href="#">cat1.1</a><ul class="jaccordion"></ul></li>
<li><a href="#">cat1.2</a><ul class="jaccordion">
<li><a href="#">cat1.2.1</a><ul class="jaccordion">
<li><a href="#">cat1.2.1.1</a><ul class="jaccordion"></ul></li></ul></li></ul></li>
<li><a href="#">cat1.3</a><ul class="jaccordion"></ul></li>
</ul></li>
<li><a href="#">cat2</a><ul class="jaccordion">
<li><a href="#">cat2.1</a><ul class="jaccordion"></ul></li></ul></li>
</ul>
</body>
</html>

Upvotes: 1

Christoph
Christoph

Reputation: 51241

The problem is the following rule:

#nav li ul ul {
    left: 192px;
    top:25px;
    margin: 0 0 0 13px;
}

since it not only applies to the second, but also to the third level. Add a rule for your third level ul to correct that.

I suggest using classes on the uls in such menus: <ul class="first-level">... This allows more precise styling and shortens the selectors.

Upvotes: 0

Related Questions