Question

I was wondering on how to make a simple drop-down menu when my button is hovered.

My button:

   <ul class="menu-links right" style="margin-left:-25px">
        <li class="menu-black"><a href="javascript:void(0)" class="dropHover">?</a></li>
    </ul>

Whenever the user hovers the “dropHover” I wish to have a new unordered list hover below. How is this possible?

Thanks.

Answer 1

You can make a simple dropdown/submenu with just plain css. The theory is that you hide your dropdown/submenu by adding display:none or pushing it far off the screen with a left position like left:-9999 and then when you hover over your menu item you reset that position or display property to show your menu, like so:

This is the construct of a basic css menu.

CSS

.menu {
    width: 960px;
    background-color: Black;
    color: #fff;
    margin: 0 auto;
    height:auto;
    font-family: Segoe UI, Arial;
    font-weight:bold;
    min-height:15px;
}
.nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav > li {
    float: left;
}

.nav li:hover a {
    background-color:#404040;
    color: #fff;
}

.nav a {
    background-color: Black;
    color: #fff;
    display: block;
    padding: 4px 12px;
    text-decoration: none;
    line-height:20px;
    font-size:12px;
    font-family: Segoe UI, Arial;
    white-space: pre;
}

.nav {
    zoom:1; /* ie hasLayout fix */
}

.nav li {
    position:relative;
}

.nav li ul {
    display:none;
    position:absolute;
    top:100%;
}

.nav li ul li:hover a {
    background-color:#777;
}

.nav li:hover ul {
    display:block;
}

/* Clearfix */

.nav:before, .nav:after {
    display:table;
    content:"";
}

.nav:after {
    clear:both;
}

You can then add your dropdown/submenu as a child of your parent menu item.

HTML

<div class="menu">
    <ul class="nav">
        <li>
            <a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a>
            <ul>
                 <li><a href="#">SubItemOne looooooooooooooooooooooonger</a></li>
                <li><a href="#">SubItemOne</a></li>
                <li><a href="#">SubItemOne</a></li>
                <li><a href="#">SubItemOne looooooooooong</a></li>
            </ul>
        </li>
        <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li>
        <li>
            <a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a>
            <ul>
                 <li><a href="#">SubItemOne looooooooooooooooooooooonger</a></li>
                <li><a href="#">SubItemOne</a></li>
                <li><a href="#">SubItemOne</a></li>
                <li><a href="#">SubItemOne looooooooooong</a></li>
            </ul>
        </li>
        <li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li>
        <li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li>
    </ul>
</div>

Demo