HTML5 Menu

by Mike Pol

HTML

<menu>
    <li><a href="#">Test 1</a>
        <nav>
            <li><a href="#">Sub Test 1</a></li>
            <li><a href="#">Sub Test 2</a></li>
            <li><a href="#">Sub Test 3</a></li>
        </nav>
    </li>
    <li><a href="#">Test 2</a></li>
    <li>
        <a href="#">Test 3</a>
        <nav>
            <li><a href="#">Sub Test 1</a></li>
            <li><a href="#">Sub Test 2</a></li>
            <li><a href="#">Sub Test 3</a></li>
        </nav>
    </li>
    <li><a href="#">Test 4</a></li>
    <li>
        <a href="#">Test 5</a>
        <nav>
            <li><a href="#">Sub Test 1</a></li>
            <li><a href="#">Sub Test 2</a></li>
            <li><a href="#">Sub Test 3</a></li>
        </nav>
    </li>
</menu>

CSS

menu {
    float: left;
    width: 100%;
    padding: 0;
    border: 1px solid #000;
    vertical-align: middle;
    position: relative;
}
menu li {
    background: #000;
    float: left;
    display: table;
    list-style: none;
    width: 20%;
    height: 40px;
    margin: 0;
    padding: 0;
    color: #fff;
    position: relative;
}
menu li a, nav li a {
    display: table-cell;
    width: 100%;
    height: 40px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
}
menu > li:hover, menu > li:hover > a {
    color: #000;
    background: #fff;
}
menu li:hover nav {
    display: block;
}
menu li nav {
    background: transparent;
    display: none;
    float: left;
    position: absolute;
    top: 40px;
    left: 0px;
    padding-top: 3px;
}
nav li {
    background: #355;
    float: left;
    display: table;
    list-style: none;
    width: 100%;
    border: 1px solid #355;
}
nav li:hover, nav li:hover a {
    background: #e5e5e5;
    color: #000;
}