CSS sub menu

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

HTML

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

    </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;


    padding: 10px;
    width: 400px;
    -webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
transition:all .1s linear;
}
ul.menu li:hover .sub {
    display: block;
    -webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
transition:all .1s linear;
}