CODEWITHSUNDEEP
cssdrop-down-menu
Jason Kelly
Jason Kelly

Reputation: 2655

Horizontal Drop down menu, trying to create another submenu within a submenu

Under my view menu, I am attempting to create a new submenu within a submenu without any sucess. How can the existing CSS code be modified such that the submenu2 under the view menu behaves and looks like all my other sub menus?

Thanks.

<!DOCTYPE html>
<html>
<head>
<style>
#menu_container {
    width: 100%;
    background: rgb(250,252,254);
    border: 1px solid rgb(128,128,128);
    font-family: Arial;
    font-size: 9pt;
}

ul#menu, ul.submenu{
    margin: 0;
    padding: 0;
    list-style: none;
}
ul#menu li{
    float: left;
}
/* hide the submenu */
li ul.submenu {
    display: none;
}
ul#menu li a{
    display: block;
    text-decoration: none;
    padding: 7px 14px;
    float:none;
    color: rgb(51,51,51);
}
/* show the submenu */
ul#menu li:hover ul.submenu{
    display: block;
    position: absolute;
    float:left;
    border: 1px solid rgb(128,128,128);
}
ul#menu li:hover li,  ul#menu li:hover a {
    float: none;
    background: rgb(230,240,254);
    color: #000;
}
ul#menu li:hover li a {
    background: rgb(250,252,254);
    color: rgb(51,51,51);
}
ul#menu li:hover li a:hover {
    background: rgb(230,240,254);
    color: #000;

}
</style>
</head>

<body>

<div id="menu_container">
    <ul id="menu">
    <li><a href="#">File</a>
        <ul class="submenu">
            <li><a href="#">Close</a></li>
        </ul>
    </li>
    <li><a href="#">Edit</a>
        <ul class="submenu">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
        </ul>
    </li>

    <li><a href="#">View</a>
        <ul class="submenu">
            <li><a href="#">Submenu 1</a></li>
                <ul><li><a href="#">Submenu 2</a></li></ul>
            <li><a href="#">Submenu 2</a></li>
        </ul>
    </li>


    <li><a href="#">Logoff</a></li>
    </ul>
</div>

</body>
</html>

Upvotes: 0

Views: 1936

Answers (1)

DaniP
DaniP

Reputation: 38262

You need to make a few changes:

On Html place the "subsubmenu" inside the li and give it the classname submenu :

<li>
  <a href="#">Submenu 1</a>
  <ul class="submenu">
    <li><a href="#">SubSubmenu 2</a></li>
  </ul>
</li>

And on CSS this:

Show only direct children submenu for each li not all submenus with >

ul#menu li:hover > ul.submenu{
  ....
}

Make new selector for subsubmenu

ul.submenu li:hover > ul.submenu{
    display: block;
    position:absolute;
    left:100%;
    top:0;
    border: 1px solid rgb(128,128,128);
}

The demo http://jsfiddle.net/mK7qS/7/

Upvotes: 2

Related Questions