CSS sub menu

Для ответа на хабре

HTML

<ul class="topmenu">
    <li><a href="">Каталог</a>
<ul class="menu">
    <li>
        <a href="">Планшеты</a>
        <div class="sub"><ul class="menu2">
        <li><a>Список ноутбуков</a><div class="sub2" ><a>Список ноутбуков2</a></div></li>
        <a>test</a><a>test</a>
        </ul>
        </div>
        
    </li>
    <li>
        <a href="">Ноутбуки</a>
        <div class="sub"><a>Список ноутбуков</a><a>test</a><a>test</a></div>
    </li>
</ul>
</li>
    
</ul>

CSS

ul.topmenu > li{
    position:relative;
    display:inline-block;
    background: #336699;
}

ul.topmenu a {
    color:#fff;
    display:block;
    white-space:pre;
    padding: 8px 14px;
    background:#336699;
    text-decoration:none;
    cursor:pointer;
}

ul.topmenu a:hover {
    background:#5588bb;
}

ul.menu {
    width: 200px;
    display:none;
    position:absolute;
    top:100%;
    
    
}
ul.topmenu li:hover > a {
    background:#5588bb;
}
ul.topmenu li:hover > ul.menu{
    display:block;
}

ul.menu li .sub {
    position: absolute;
    top: 0;
    left: 100%;
    background:#336699;
    bottom:0;
    display: none;
}

ul.menu li:hover .sub {
    display: block;
}