HTML, эффект зависания в выпадающих меню

Question

У меня есть меню, созданное через список, и мне нужно, чтобы оно было немного более интерактивным с пользователем.

<ul class="baked">
<li>
    <a href="P.html">P</li>
    <ul>
        <li><a href="R.html">R</a></li>
        <li><a href="P.html">P</a></li>
        <li><a href="N.html">N</a></li>
        <li><a href="U.html">U</a></li>
        <li><a href="T.html">T</a></li>
    </ul>
</li> 

Я хочу, чтобы это меню было выпадающим, с одной головой и тремядополнительные опции открываются при входе в главное меню при зависании.

И css:

ul.baked{margin-top: -140px;
    position: absolute;
          float: left;}           

ul.baked:hover{background:silver;
          width: 200px;
          height: 200px;
          border-radius: 4pt;
          border: 1px solid #000;

          box-shadow: inset 0px 6px 5px -2px #657;

Также я заметил мерцание, когда подхожу к меню слишком рано.Как я могу решить это?

Answer 1

Вы объявляете position: absolute, а затем float: left, что не имеет смысла, и ваш HTML-код недействителен, как сказано в комментариях.
Мерцание при слишком раннем приближении к меню объясняется тем, что <ul> по умолчанию display: block, что увеличится до размера его контейнера. Чтобы решить эту проблему, вы можете использовать float: left, как вы это сделали, или display: inline-block, чтобы ограничить меню. Этот пример должен работать:

HTML:

<ul class="baked">
<li>
    <a href="P.html">Menu</a>
    <ul>
        <li><a href="R.html">One</a></li>
        <li><a href="P.html">Two</a></li>
        <li><a href="N.html">Three</a></li>
        <li><a href="U.html">Four</a></li>
        <li><a href="T.html">Five</a></li>
    </ul>
</li>
</ul>

CSS:

.baked { float: left; }
.baked li ul {
    position: absolute;
    background: red;
    display: none;
}
.baked li:hover ul { display: block; }

пример:

http://jsfiddle.net/elclanrs/7GENy/