Modify CSS dropdown menu to add sub-menu option to it

Question

Good day to all!

I need help to modify a CSS navigation menu with dropdowns to add sub-menu to it.

For example, I have menu options "You" -> "Plan". I need to add a sub-menu into "Plan", so when user hovers the cursor over "Plan", a sub-menu with other options appears - just like when he hovers over "You" option.

HTML:

<nav>
        <ul>
            <li><a href="#">View</a></li>
            <li class="drop">
                <a href="#">You</a>

                <div class="dropdownContain">
                    <div class="dropOut">
                        <div class="triangle"></div>
                        <ul>
                            <li>Plan</li>
                            <li>Account Settings</li>
                            <li>Switch Account</li>
                            <li>Sign Out</li>
                        </ul>
                    </div>
                </div>

            </li>
            <li><a href="#">Help</a></li>
        </ul>
</nav>

CSS:

body {
    text-align: center;
    background: #e0e0e0;
    padding-bottom: 200px;
}

a {
    text-decoration: none;
}

/*---------- Wrapper --------------------*/

nav {
    width: 100%;
    height: 80px;
    background: #222;
}

ul {
    text-align: center;
}

ul li {
    font: 13px Verdana, 'Lucida Grande';
    cursor: pointer;
    -webkit-transition: padding .05s linear;
    -moz-transition: padding .05s linear;
    -ms-transition: padding .05s linear;
    -o-transition: padding .05s linear;
    transition: padding .05s linear;
}
ul li.drop {
    position: relative;
}
ul > li {
    display: inline-block;
}
ul li a {
    line-height: 80px;
    padding: 0 20px;
    height: 80px;
    color: #777;
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -ms-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    transition: all .1s ease-out;
}
ul li a:hover {
    color: #eee;
}

.dropOut .triangle {
    width: 0;
    height: 0;
    position: absolute;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
    top: -8px;
    left: 50%;
    margin-left: -8px;
}
.dropdownContain {
    width: 160px;
    position: absolute;
    z-index: 2;
    left: 50%;
    margin-left: -80px; /* half of width */
    top: -400px;
}
.dropOut {
    width: 160px;
    background: white;
    float: left;
    position: relative;
    margin-top: 0px;
    opacity: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
    -moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
    box-shadow: 0 1px 6px rgba(0,0,0,.15);
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -ms-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    transition: all .1s ease-out;
}

.dropOut ul {
    float: left;
    padding: 10px 0;
}
.dropOut ul li {
    text-align: left;
    float: left;
    width: 125px;
    padding: 12px 0 10px 15px;
    margin: 0px 10px;
    color: #777;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: background .1s ease-out;
    -moz-transition: background .1s ease-out;
    -ms-transition: background .1s ease-out;
    -o-transition: background .1s ease-out;
    transition: background .1s ease-out;
}

.dropOut ul li:hover {
    background: #f6f6f6;
}

ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }

Any help would be appreciated!

Here's a recent tutorial on how to do this (first Google hit): adam-bray.com/blog/91/easy-html-5-css-3-navigation-menu . Scroll down to see the update where he adds another level. I figured this would be helpful since he also explains the 'why'. — Cooleronie
– Cooleronie, Commented Jan 16, 2015 at 15:51

jmore009 · Accepted Answer · 2015-01-16 15:49:20Z

You just need to add another ul for your subnav set to position:absolute and display: none and then show it when you hover over .dropOut ul li

.subnav{
   display:none;
   background: black;
   position: absolute;
   left: 100%;
   top: 0;
}

.dropOut ul li:hover .subnav{
   display: block;
}

Just be sure to set .dropOut ul li to position: relative so that it will contain your subnav:

.dropOut ul li {
   position: relative; //add
   text-align: left;
   float: left;
   width: 125px;
   ....

HTML

<div class="dropdownContain">
    <div class="dropOut">
        <div class="triangle"></div>
        <ul>
            <li>Plan
               <ul class="subnav">
                   <li>menu 1</li>
                   <li>menu 1</li>
                   <li>menu 1</li>
               </ul>
            </li>
            <li>Account Settings</li>
            <li>Switch Account</li>
            <li>Sign Out</li>
        </ul>
    </div>
</div>

FIDDLE

Akshay · Accepted Answer · 2015-01-16 15:51:01Z

You shouldn't use opacity to do this use display instead i have did this using opacity but that leaves some space use display property to avoid this http://jsfiddle.net/k2rjkdxy/ This one with display http://jsfiddle.net/k2rjkdxy/1/

body {
    text-align: center;
    background: #e0e0e0;
    padding-bottom: 200px;
}

a {
    text-decoration: none;
}

/*---------- Wrapper --------------------*/

nav {
    width: 100%;
    height: 80px;
    background: #222;
}

ul {
    text-align: center;
}

ul li {
    font: 13px Verdana, 'Lucida Grande';
    cursor: pointer;
    -webkit-transition: padding .05s linear;
    -moz-transition: padding .05s linear;
    -ms-transition: padding .05s linear;
    -o-transition: padding .05s linear;
    transition: padding .05s linear;
}
ul li.drop {
    position: relative;
}
ul > li {
    display: inline-block;
}
ul li a {
    line-height: 80px;
    padding: 0 20px;
    height: 80px;
    color: #777;
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -ms-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    transition: all .1s ease-out;
}
ul li a:hover {
    color: #eee;
}

.dropOut .triangle {
    width: 0;
    height: 0;
    position: absolute;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
    top: -8px;
    left: 50%;
    margin-left: -8px;
}
.dropdownContain {
    width: 160px;
    position: absolute;
    z-index: 2;
    left: 50%;
    margin-left: -80px; /* half of width */
    top: -400px;
}
.dropOut {
    width: 160px;
    background: white;
    float: left;
    position: relative;
    margin-top: 0px;
    opacity: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
    -moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
    box-shadow: 0 1px 6px rgba(0,0,0,.15);
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -ms-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    transition: all .1s ease-out;
}

.dropOut ul {
    float: left;
    padding: 10px 0;
}
.dropOut ul li {
    text-align: left;
    float: left;
    width: 125px;
    padding: 12px 0 10px 15px;
    margin: 0px 10px;
    color: #777;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: background .1s ease-out;
    -moz-transition: background .1s ease-out;
    -ms-transition: background .1s ease-out;
    -o-transition: background .1s ease-out;
    transition: background .1s ease-out;
}

.dropOut ul li:hover {
    background: #f6f6f6;
}

ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }

.d{
    
   opacity:0;
    
}

ul li ul li:hover .d{
   opacity:1;
}

<nav>
        <ul>
            <li><a href="#">View</a></li>
            <li class="drop">
                <a href="#">You</a>

                <div class="dropdownContain">
                    <div class="dropOut">
                        <div class="triangle"></div>
                        <ul>
                            <li>Plan
                                <ul class="d"><li>text</li>
                                <li>text</li>
                                <li>text</li>
                                </ul></li>
                            <li>Account Settings</li>
                            <li>Switch Account</li>
                            <li>Sign Out</li>
                        </ul>
                    </div>
                </div>

            </li>
            <li><a href="#">Help</a></li>
        </

This one with display property

body {
    text-align: center;
    background: #e0e0e0;
    padding-bottom: 200px;
}

a {
    text-decoration: none;
}

/*---------- Wrapper --------------------*/

nav {
    width: 100%;
    height: 80px;
    background: #222;
}

ul {
    text-align: center;
}

ul li {
    font: 13px Verdana, 'Lucida Grande';
    cursor: pointer;
    -webkit-transition: padding .05s linear;
    -moz-transition: padding .05s linear;
    -ms-transition: padding .05s linear;
    -o-transition: padding .05s linear;
    transition: padding .05s linear;
}
ul li.drop {
    position: relative;
}
ul > li {
    display: inline-block;
}
ul li a {
    line-height: 80px;
    padding: 0 20px;
    height: 80px;
    color: #777;
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -ms-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    transition: all .1s ease-out;
}
ul li a:hover {
    color: #eee;
}

.dropOut .triangle {
    width: 0;
    height: 0;
    position: absolute;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
    top: -8px;
    left: 50%;
    margin-left: -8px;
}
.dropdownContain {
    width: 160px;
    position: absolute;
    z-index: 2;
    left: 50%;
    margin-left: -80px; /* half of width */
    top: -400px;
}
.dropOut {
    width: 160px;
    background: white;
    float: left;
    position: relative;
    margin-top: 0px;
    display:none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
    -moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
    box-shadow: 0 1px 6px rgba(0,0,0,.15);
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -ms-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    transition: all .1s ease-out;
}

.dropOut ul {
    float: left;
    padding: 10px 0;
}
.dropOut ul li {
    text-align: left;
    float: left;
    width: 125px;
    padding: 12px 0 10px 15px;
    margin: 0px 10px;
    color: #777;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: background .1s ease-out;
    -moz-transition: background .1s ease-out;
    -ms-transition: background .1s ease-out;
    -o-transition: background .1s ease-out;
    transition: background .1s ease-out;
}

.dropOut ul li:hover {
    background: #f6f6f6;
}

ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { display:block; margin-top: 8px; }

.d{
    
  display:none;
    
}

ul li ul li:hover .d{
    background:skyblue;
    position:absolute;
  display:block;
}

<nav>
        <ul>
            <li><a href="#">View</a></li>
            <li class="drop">
                <a href="#">You</a>

                <div class="dropdownContain">
                    <div class="dropOut">
                        <div class="triangle"></div>
                        <ul>
                            <li>Plan
                                <ul class="d"><li>text</li>
                                <li>text</li>
                                <li>text</li>
                                </ul></li>
                            <li>Account Settings</li>
                            <li>Switch Account</li>
                            <li>Sign Out</li>
                        </ul>
                    </div>
                </div>

            </li>
            <li><a href="#">Help</a></li>
        </

Collectives™ on Stack Overflow

Modify CSS dropdown menu to add sub-menu option to it

2 Answers 2

FIDDLE

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related