Pure CSS Multi-Level Drop-Down Menu

.third-level-menu{    position: absolute;    top: 0;    right: -150px;    width: 150px;    list-style: none;    padding: 0;    margin: 0;    display: none;}
.third-level-menu > li{    height: 30px;    background: #999999;}.third-level-menu > li:hover { background: #CCCCCC; }
.second-level-menu{    position: absolute;    top: 30px;    left: 0;    width: 150px;    list-style: none;    padding: 0;    margin: 0;    display: none;}
.second-level-menu > li{    position: relative;    height: 30px;    background: #999999;}.second-level-menu > li:hover { background: #CCCCCC; }
.top-level-menu{    list-style: none;    padding: 0;    margin: 0;}
.top-level-menu > li{    position: relative;    float: left;    height: 30px;    width: 150px;    background: #999999;}.top-level-menu > li:hover { background: #CCCCCC; }
.top-level-menu li:hover > ul{    /* On hover, display the next level's menu */    display: inline;}

/* Menu Link Styles */
.top-level-menu a /* Apply to all links inside the multi-level menu */{    font: bold 14px Arial, Helvetica, sans-serif;    color: #FFFFFF;    text-decoration: none;    padding: 0 0 0 10px;
    /* Make the link cover the entire list item-container */    display: block;    line-height: 30px;}.top-level-menu a:hover { color: #000000; }

<ul class="top-level-menu">    <li><a href="#">About</a></li>    <li><a href="#">Services</a></li>    <li>        <a href="#">Offices</a>        <ul class="second-level-menu">            <li><a href="#">Chicago</a></li>            <li><a href="#">Los Angeles</a></li>            <li>                <a href="#">New York</a>                <ul class="third-level-menu">                    <li><a href="#">Information</a></li>                    <li><a href="#">Book a Meeting</a></li>                    <li><a href="#">Testimonials</a></li>                    <li><a href="#">Jobs</a></li>                </ul>            </li>            <li><a href="#">Seattle</a></li>        </ul>    </li>    <li><a href="#">Contact</a></li></ul>

Seeking pure CSS drop-down multi-level menu for ME IE 7+

Ive used Project7.coms css library/technique fairly successfully. An example of its application can be found on my small company's website (I apologize for using/ plugging my own site) but it is the only time I've used this library.

Multi-Level Drop-down Menu

.subnav:hover .subnav-content, .subnav1:hover .subnav-content1 {
  display: block;
}

You need to add the css for the classes subnav1 and subnav-content1

https://jsfiddle.net/buzz868/1txq8bo6/1/

Customizing a Pure CSS Responsive Menu With Multiple Conditions

The twice menu problem is because you have media query it changing the display property of this <label for="drop-1" class="toggle">Dashboard ▼</label> tag .

---

Related Topics