放置CSS悬停菜单的正确方法是什么？

Question

I put together a fiddle with a very basic hover example.

http://jsfiddle.net/qhj2P/

Here is the CSS:

.button
{
    width: 50px;
    height: 15px;
    background-color: #090;
    padding: 5px;
}

.menu
{
    height: 200px;
    width: 50px;
    background-color: #900;
    display: none;    
}

I'm curious what the best way to position the menus is. How do I make it so that the first menu drops down right below the first button and the second menu drops down right below the second button? I'm not so good at CSS positioning and the like.

Answer 1

Use a styled, unordered lists, not DIVs. Stick most of the styling on the A-tag with display:block .

<div class="menu">
<ul>
    <li><a href="...">Menu Item</a>
        <ul>
            <li><a href="...">Sub Item</a></li>
            <li><a href="...">Sub Item</a></li>
        </ul>
    </li>
    <li><a href="...">Menu Item</a></li>
</ul>
</div>

CSS:

.menu ul, .menu li {
    padding:0;
    margin:0;
    list-style-type:none
}

.menu li {
    display:inline-block;
    position:relative;
}

.menu a {
    font-family:arial;
    text-decoration:none;
    display:block;
    background-color:#c0c0c0;
    padding:3px;
    color:#000000
}

/* level two */

ul ul {
    position:absolute;
    display:none;    
}

ul ul a {
     background-color:#d0d0d0;
     margin-top:3px;   
}

Answer 2

The best way would be to use <ul> instead of your current setup.
http://jsfiddle.net/elclanrs/fHmvs/1/

<ul class="menu">
    <li>
        <a href="#">One</a>
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Two</a>
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
        </ul>
    </li>
</ul>

css:

.menu li {
    float: left;
    position: relative;
}
.menu ul {
    position: absolute;
    display: none;
    background: red;
}
.menu ul li { clear: both; }
.menu a {
    display: block;
    padding: .5em;
    margin: .1em;
}

jq:

$('.menu li').hover(function() {
    $(this).children('ul').stop(1, 1).slideToggle();
});