DropDown Menu
#1
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.
Reply


Messages In This Thread
DropDown Menu - by Hitman - 2011-05-06, 08:56 AM
RE: DropDown Menu - by Vocaloid - 2011-07-29, 05:30 PM
RE: DropDown Menu - by Dragonzsoul - 2011-07-30, 03:33 PM
RE: DropDown Menu - by GonickPT - 2011-08-02, 11:16 PM
RE: DropDown Menu - by Fluffybunny - 2011-08-02, 11:19 PM
RE: DropDown Menu - by Nishimi - 2011-08-04, 03:02 AM
RE: DropDown Menu - by Claire - 2011-08-11, 08:19 PM
RE: DropDown Menu - by Concon - 2011-08-11, 09:49 PM
RE: DropDown Menu - by Euan T - 2011-08-11, 10:05 PM
RE: DropDown Menu - by Joenn A. - 2011-08-15, 11:54 AM
RE: DropDown Menu - by willisx719 - 2011-10-23, 03:03 AM
RE: DropDown Menu - by WeModYou - 2011-10-24, 01:41 AM

Forum Jump:


Users browsing this thread: 1 Guest(s)