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

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