CSS Dropdown 3rd level Menu Issue

Question

I have an issue in displaying the 3rd level in a dropdown menu. The 3rd level is not aligning properly with their 2nd level parent. If you click on any parent the third level starts at top. Offcourse it may be because of absolute posistioning and having top:0. I tried to change the positioning to relative but the parent menu item in focus expands. Changing value for Top attribute also doesnt help. I am unable to find a alternate css which is as simple as that the one I found.

HTML

<div id="menu">
<ul id="menu">
    <li><span>Home</span></li>
    <li><span>Test-L1</span>
        <ul>
            <li><span>Test-L2A</span></li>
            <li><span>Test-L2B</span>
                <ul>
                    <li><span>Test-L3A</span></li>
                    <li><span>Test-L3B</span></li>
                </ul>
            </li>
            <li><span>Test-L2C</span>
                <ul>
                    <li><span>Test-L3C</span></li>
                    <li><span>Test-L3D</span></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>

CSS

* {
     list-style:none;
     margin:0;
     padding:0;
     font-size:1em;
     cursor:pointer;
  }
#menu{
     margin:3px;
}

#menu > li{            /* Top Level */
    float:left;
    margin-right:3px;
}
#menu > li > span{
    display:block;
    background:#55aa7f;
    padding:3px 10px;
}
#menu > li:hover > span{
    color:#fff;
}

#menu > li > ul{        /* Second Level */
    display:none;
    background:#55aa7f;
}
#menu > li:hover > ul{
    display:block;
    position:absolute;
}
#menu > li > ul > li > span{
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
}
#menu > li > ul > li:hover > span{
    color:#fff;
}

#menu > li > ul li > ul{   /* Third Level & beyond */
    display:none;
    background:#55aa7f;
}
#menu > li > ul li:hover > ul{
    display:block;
    position:absolute;
    left:100%;
    border-left:solid 3px #fff;
    top:0;
    width:auto;
}
#menu > li > ul > li ul > li{
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
    white-space:nowrap;
}
#menu > li > ul > li ul > li:hover > span{
    color:#fff;
}

Jsfiddle http://jsfiddle.net/85sZy/

I have tried in IE9 and Chrome v29. If it is not possible to achieve the result with the above css, please provide me a alternate css which will serve the purpose.Still I prefer corrected version of above css.

Nitesh · Accepted Answer · 2013-09-09 13:20:11Z

Here you go.

SOLUTION 1: BY MANUALLY ADDING POSITION RELATIVE TO THE LI ELEMENT

WORKING DEMO

The HTML:

<div id="menu">
    <ul id="menu">
        <li><span>Home</span></li>
        <li><span>Test-L1</span>
            <ul>
                <li><span>Test-L2A</span></li>
                <li class="levelThreeAlign"><span>Test-L2B</span>
                    <ul>
                        <li><span>Test-L3A</span></li>
                        <li><span>Test-L3B</span></li>
                    </ul>
                </li>
                <li class="levelThreeAlign"><span>Test-L2C</span>
                    <ul>
                        <li><span>Test-L3C</span></li>
                        <li><span>Test-L3D</span></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

The CSS:

* {
     list-style:none;
     margin:0;
     padding:0;
     font-size:1em;
     cursor:pointer;
  }
#menu{
     margin:3px;
}

#menu > li{            /* Top Level */
    float:left;
    margin-right:3px;
}
#menu > li > span{
    display:block;
    background:#55aa7f;
    padding:3px 10px;
}
#menu > li:hover > span{
    color:#fff;
}

#menu > li > ul{        /* Second Level */
    display:none;
    background:#55aa7f;
}
#menu > li:hover > ul{
    display:block;
    position:absolute;
}
#menu > li > ul > li > span{
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
}
#menu > li > ul > li:hover > span{
    color:#fff;
}

#menu > li > ul li > ul{   /* Third Level & beyond */
    display:none;
    background:#55aa7f;
}
#menu > li > ul li:hover > ul{
    display:block;
    position:absolute;
    left:100%;
    border-left:solid 3px #fff;
    top:0;
    width:auto;
}
#menu > li > ul > li ul > li{
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
    white-space:nowrap;
}
#menu > li > ul > li ul > li:hover > span{
    color:#fff;
}

.levelThreeAlign{position:relative;}

SOLUTION 2 : BY CREATING A CSS INHERITANCE TYPE IN THE STYLESHEET WITH A POSITION RELATIVE

WORKING DEMO

The HTML:

<div id="menu">
    <ul id="menu">
        <li><span>Home</span></li>
        <li><span>Test-L1</span>
            <ul>
                <li><span>Test-L2A</span></li>
                <li><span>Test-L2B</span>
                    <ul>
                        <li><span>Test-L3A</span></li>
                        <li><span>Test-L3B</span></li>
                    </ul>
                </li>
                <li><span>Test-L2C</span>
                    <ul>
                        <li><span>Test-L3C</span></li>
                        <li><span>Test-L3D</span></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

The CSS:

* {
     list-style:none;
     margin:0;
     padding:0;
     font-size:1em;
     cursor:pointer;
  }
#menu{
     margin:3px;
}

#menu > li{            /* Top Level */
    float:left;
    margin-right:3px;
}
#menu > li > span{
    display:block;
    background:#55aa7f;
    padding:3px 10px;
}
#menu > li:hover > span{
    color:#fff;
}

#menu > li > ul > li{position:relative;}

#menu > li > ul{        /* Second Level */
    display:none;
    background:#55aa7f;
}
#menu > li:hover > ul{
    display:block;
    position:absolute;
}
#menu > li > ul > li > span{
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
}
#menu > li > ul > li:hover > span{
    color:#fff;
}

#menu > li > ul li > ul{   /* Third Level & beyond */
    display:none;
    background:#55aa7f;
}
#menu > li > ul li:hover > ul{
    display:block;
    position:absolute;
    left:100%;
    border-left:solid 3px #fff;
    top:0;
    width:auto;
}
#menu > li > ul > li ul > li{
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
    white-space:nowrap;
}
#menu > li > ul > li ul > li:hover > span{
    color:#fff;
}

Hope this helps.

The second solution is even better since I generate menu items dynamically from database. Thanks again.

rafaelcastrocouto · Accepted Answer · 2013-09-09 14:17:19Z

HTML

<div id="menu-container">
    <ul id="menu">
        <li><span>Home</span></li>
        <li><span>Test-L1A</span>
            <ul>
                <li><span>Test-L2A</span></li>
                <li><span>Test-L2B</span>
                    <ul>
                        <li><span>Test-L3A</span></li>
                        <li><span>Test-L3B</span></li>
                    </ul>
                </li>
                <li><span>Test-L2C</span>
                    <ul>
                        <li><span>Test-L3C</span></li>
                        <li><span>Test-L3D</span></li>
                    </ul>
                </li>
            </ul>
        </li>
    <li><span>Test-L2A</span></li>
    </ul>
</div>

CSS

#menu-container * {
  float: left;
  display: inline-block;
  padding: 0; margin: 0;
  list-style:none;
  position: relative;
}
#menu-container span {
  cursor:pointer;
  background: #ccc;
  padding: 6px;
  margin: 6px;
  overflow: hidden;
  white-space: nowrap;
}
#menu ul {
  position: absolute;
}
/*first level*/
#menu > li > ul {
  left: 0;
  top: 100%;
}
/*other levels*/
#menu > li > ul > li ul {
  left: 100;
  top: 0%;
}
/*hide and show on hover*/
#menu li > ul li {
  display: none;
}
#menu li:hover > ul > li {
  display: block;
}

Demo: http://codepen.io/anon/pen/tBxwK

Collectives™ on Stack Overflow

CSS Dropdown 3rd level Menu Issue

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related