Вертикальное меню с выпадающим подменю

by AJIEKCEU

HTML

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

CSS

ul.menu {
    width: 200px
}
ul.menu li {
    position: relative;
}
ul.menu a {
    display: block;
    background: #CCC;
    padding: 8px 14px;
}
ul.menu li .sub {
    background: #777;
    position: absolute;
    top: 0;
    left: 200px;
    display: none;
    padding: 10px;
    width: 400px;
}
ul.menu li:hover .sub {
    display: block;
}