Techfoobar

Lets create a multi-level drop-down navigation menu. OK. Big deal. But wait, I need it to function even if JS is disabled (No, I don’t need graceful degradation. Thank You.). I want it made using 100% CSS and HTML.

The :hover Selector

The CSS :hover selector can be taken advantage of in a rather interesting way. As we already know, the :hover selector gets applied to an element when you hover your mouse over it. This is something we regularly use for links. But no so much for other elements. In fact, we can hook into this class change for detecting mouseover events.

Explanation

An element with class “a” becomes one with “a:hover” when the mouse pointer is over it.

.a { /* normally */
}
.a:hover { /* help! the mouse is on me */
}

If it has a child element with class “b”, we can style it as:

.a .b {
}

Now lets say, b is normally not shown. It should be shown only when the mouse is over a.

.a .b {
    display: none;
}
.a:hover .b { /* b will be visible only when mouse is on a */
    display: block;
}

That is the basic “event handling” for the menu. Entirely with CSS, we alter the “display” property of an element when the mouse is over its parent. In the above example, “a” can be considered a menu item containing sub-items, and “b” can be considered as the element holding the child menu items.

Demo here: http://www.techfoobar.com/examples/purecssmenu.html

CSS

<style>
.menu {
    overflow: visible;
}
.menuitem {
    position: relative;
    overflow: visible;
    background-color: #eee;
    border: 1px solid transparent;
    color: #444;
    padding: 1px 6px;
    cursor: pointer;
}
.menuitem:hover {
    background-color: #777;
    color: #fff;
}
.subitems {
    position: absolute;
    padding: 3px;
    border-radius: 5px;
    border: 1px solid #777;
    display: none;
    width: 120px;
    background-color: #eee;
}
.menu > .menuitem {
    float: left;
    clear: none;
    margin-right: 10px;
    border-radius: 3px;
}
.menu > .menuitem > .subitems {
    top: 20px;
    left: 10px;
    z-index: 2;
}
.menu > .menuitem:hover > .subitems {
    display: block;
}
.subitems > .menuitem {
}
.subitems > .menuitem > .subitems {
    top: 5px;
    left: 50px;
    z-index: 4;
}
.subitems > .menuitem:hover > .subitems {
    display: block;
}
</style>

HTML

<div class="menu">
<div class="menuitem">Home
    <div class="subitems">
         <div class="menuitem">Home #1</div>
         <div class="menuitem">Home #2</div>
         <div class="menuitem">Home #3</div>
    </div>
</div>
<div class="menuitem">About
    <div class="subitems">
         <div class="menuitem">Home #1
              <div class="subitems">
                   <div class="menuitem">Home #1</div>
                   <div class="menuitem">Home #2</div>
                   <div class="menuitem">Home #3</div>
              </div>
         </div>
         <div class="menuitem">Home #2</div>
         <div class="menuitem">Home #3</div>
    </div>
</div>
<div class="menuitem">Hello
    <div class="subitems">
         <div class="menuitem">Home #1</div>
         <div class="menuitem">Home #2</div>
         <div class="menuitem">Home #3</div>
    </div>
</div>
</div>