HTML, hovering effect on drop down menus

Question

I have a menu created through a list, and need it to be a bit more interactive with the user.

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

I want this menu to be a drop down menu, with one head and three additional options opening up when the main menu is entered via hovering.

And the 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;

Also I noticed a flickering when i approach the menu a bit too early. How can i solve this?

Your html is invalid. It might be a typo but you're closing `` with `` and `` is missing. Also, can you put up a jsfiddle? It would be helpful. — elclanrs, Feb 13 '12 at 21:19
Here are some ideas for CSS menus since you seem to be new to them: http://stackoverflow.com/a/2188851/1182904 — Josh Jones, Feb 13 '12 at 21:29

score 2 · Answer 1 · answered Feb 13 '12 at 21:27

You're declaring position: absolute and then float: left which makes no sense, and your html is invalid like a said in the comments.
The flickering when approaching the menu too early is because <ul> is by default display: block which will expand to the size of its container. To solve this you can use float: left, like you did, or display: inline-block to contain the menu to its boundaries. This example should work:

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

example:

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

HTML, hovering effect on drop down menus

1 Answers1