MyBB Community Forums

I know its simple but i see so many people ask how to do it.

Add this to your header (edit as you need).

    <ul id="nav">
        <li><a href="#">Home</a>
            <ul>
                <li><a href="#">Hover 1</a></li>
                <li><a href="#">Hover 2</a></li>
                <li><a href="#">Hover 3</a></li>
                <li><a href="#">Hover 4</a></li>
            </ul>
        </li>
        <li><a href="#">Nav 1</a>
            <ul>
                <li><a href="#">Hover 1</a></li>
                <li><a href="#">Hover 2</a></li>
                <li><a href="#">Hover 3</a></li>
                <li><a href="#">Hover 4</a></li>
            </ul>
        </li>
        <li><a href="#">Nav 2</a>
            <ul>
                <li><a href="#">Hover 1</a></li>
                <li><a href="#">Hover 2</a></li>
                <li><a href="#">Hover 3</a></li>
                <li><a href="#">Hover 4</a></li>
            </ul>
        </li>
        <li><a href="#">Nav 3</a>
            <ul>
                <li><a href="#">Hover 1</a></li>
                <li><a href="#">Hover 2</a></li>
                <li><a href="#">Hover 3</a></li>
                <li><a href="#">Hover 4</a></li>
            </ul>
        </li>
        <li><a href="#">Nav 4</a>
            <ul>
                <li><a href="#">Hover 1</a></li>
                <li><a href="#">Hover 2</a></li>
                <li><a href="#">Hover 3</a></li>
                <li><a href="#">Hover 4</a></li>
            </ul>
        </li>
    </ul>

Add this to your css (edit as you please).

#nav a {color:#fff; text-decoration:none;}
#nav { float:left; width:100%; background:#111; margin:0; padding:0; color:#fff;}
#nav li {float:left; list-style:none; padding:10px; position:relative;}
#nav li:hover {background:#f9f9f9;}
#nav li:hover > a {color:#000;}
#nav li ul {display:none; position:absolute; background:#111; border-top:2px solid #222; top:100%; left:0; margin:0; padding:0;}
#nav li ul li {min-width:150px;}
#nav li:hover ul {display:block;}

Hope this helps if you suffering to build one.

Very nice tutorial!

thank share to tutorial nice!

Could you show some outcome?
Thanks for the tutorial anyway

I use Chrome CSS Dropdown Menu.

This is a pretty good tutorial. I might try this out sometime, thanks for this.

It's nice, but it's not really much of a tutorial without explanation of how the HTML and CSS work together to make the drop-down menu.

I think I can explain it, although I would have done it differently.

#nav li ul {display:none; position:absolute; background:#111; border-top:2px solid #222; top:100%; left:0; margin:0; padding:0;}

the positioning and the "top" properties work together, so that when you don't hover over the list the menu isn't there, but when you do, it appears, the "100%" puts the menu off screen when not hovered.

I think that's how it works, as I use

left: -999;

to make my drop menus rather than "top".

(2011-08-11, 09:49 PM)Concon Wrote: [ -> ]I think I can explain it, although I would have done it differently.

#nav li ul {display:none; position:absolute; background:#111; border-top:2px solid #222; top:100%; left:0; margin:0; padding:0;}

the positioning and the "top" properties work together, so that when you don't hover over the list the menu isn't there, but when you do, it appears, the "100%" puts the menu off screen when not hovered.

I think that's how it works, as I use

left: -999;

to make my drop menus rather than "top".

Actually, the display: none; hides the menu in it's inactive state. The top property is used with the absolute positioning to position the menu.

Also, I wouldn't advise using "left: -999;" as the menu may still show for people with large monitors. I've never seen anybody do such a thing to hide elements either.

Same as here
http://forums.mybbcommunity.com/thread-329.html
Other than that thanks.