Show-HIde Submenu (NO JS)

by Aya Alao

HTML

<ul class="menu">
    <li><a href="">Menu</a></li>
    <li><a href="">A very long Menu</a>		
        <ul class="submenu">
            <li><a href="">Menu</a></li>
            <li><a href="">Menu</a></li>
        </ul>
    </li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a>
        <ul class="submenu">
            <li><a href="">A long submenu</a></li>
            <li><a href="">Menu</a></li>
        </ul>
    </li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
</ul>

CSS

*{padding:0;margin:0;}
body{font:16px Tahoma;padding:10px;}
a{text-decoration:none;}
ul{list-style-type:none;}
.menu{
    position:relative;
}
.menu li{
    float:left;
}
.menu>li>a{
    background:red;
    padding:15px;
    display:block;
    border:1px solid black;
}
.menu>li>a:hover{
    background:orange;
}
.submenu li{
    clear:left;
}
.submenu>li>a{
    background:yellow;
    padding:10px;
    display:block;
    border:1px solid black;
    width:120px;
}
.submenu{
    position:absolute;
    display:none;
}
.menu>li:hover>.submenu{
    display:block;
}