Drop Down Menu

How to make a Drop Down Menu?

Drop down menu is very popular in Blogger, Wordpress and Static sites. Many professional peoples are  use this menu on his site. Drop down menu is look like beautiful and also an important role in Search Engine Optimization. I give you Code which is use in Drop Down Menu.

Step 1:

open your Dreamweaver and put this code in Body Section.

<ul id="mymenu">

            <li><a href="#">Home</a></li>

            <li><a href="#">Contact</a></li>

        <li>

        <a href="#">Ayaz</a>

        <ul id="local">

            <li><a href="#">Matric</a></li>

                <li><a href="#">F.sc</a></li>

                <li><a href="#">B.sc</a></li>

                <li><a href="#">M.B.B.S</a></li>

            </ul>

        </li>

            <li><a href="#">Gallery</a>

                    <ul id="local">

                    <li><a href="#">Photo</a></li>

                    <li><a href="#">Animal</a></li>

                    <li><a href="#">Vedio</a></li>

                    <li><a href="#">contact</a></li>

                    </ul>

            </li>

            <li><a href="#">Help</a></li>

    </ul>

Step 2:

Now this code put in Head Section

<style type="text/css">

#mymenu,

#mymenu ul {

    list-style: none;

}

#mymenu > li {

    float: left;

}

#mymenu li a {

    height: 20px;

    line-height: 10px;

    padding: 0 15px;

    text-decoration: none;

background-color:#903;

}

#mymenu ul {

    position: absolute;

    display: none;

}

#mymenu li:hover ul {

    display: block;

}

#mymenu > li > a {

    color: #fff;

    font-weight: bold;

}

#mymenu > li:hover > a {

    background: #CCC;

    color: #903;

}

#mymenu ul li a {

    color: #fff;

}

#mymenu ul li:hover a {

    background: #CCC;

color:#900;

}

#mymenu ul{ background-color:#903;}

#local li a {

    height: 20px;

margin-left:-39px;

    text-decoration: none;

background-color:#903;

}

</style>

I hope to you like this Drop Down Menu