how to create a dropdown list in a header menu in html and css

[purna_ch]

i have made a simple header page for a project.

now i want to create a dropdown menu for a single menu item in the menu bar.

how i will do that ..??

for ex-under COURSES MENU, THE SUBMENU ARE : DEGREE,DIPLOMA,HIGHSCHOOL.

 

[CroNiX]

Many many ways. Best to google "css menu dropdown"

[Zane]

It also helps us tremendously to have code written beforehand.  Otherwise, you might as well ask "Is this a good car?"

 

To answer you question without you having given code, just use the SELECT HTML tag, with OPTION tags inside.

[WebOutGateway]

Creating a dropdown menu is simple with HTML and CSS.

 

1. Create your list of menu items, one with its sub-menu, using HTML.

 

<ul id="menu">

    <li>

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

    </li>

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



        <ul class="sub-menu">

            <li>

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

            </li>

            <li>

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

            </li>

            <li>

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

            </li>

           

        </ul>

    </li>

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



    </li>

</ul>

2. Next, using CSS, style your menu list as it is, when it is hovered, and the appearance of your submenu when the main menu is hovered.

 

/*Initialize*/

ul#menu, ul#menu ul.sub-menu {

    padding:0;

    margin: 0;

}

ul#menu li, ul#menu ul.sub-menu li {

    list-style-type: none;

    display: inline-block;

}

/*Link Appearance*/

ul#menu li a, ul#menu li ul.sub-menu li a {

    text-decoration: none;

    color: #fff;

    background: #666;

    padding: 5px;

    display:inline-block;

}

/*Make the parent of sub-menu relative*/

ul#menu li {

    position: relative;

}

/*sub menu*/

ul#menu li ul.sub-menu {

    display:none;

    position: absolute;

    top: 30px;

    left: 0;

    width: 100px;

}

ul#menu li:hover ul.sub-menu {

    display:block;

}

Source: http://forums.phpfreaks.com/topic/290356-how-to-create-a-dropdown-list-in-a-header-menu-in-html-and-css/?do=findComment&comment=1487238

 

You may also want to take a look at this: 

http://cssmenumaker.com/blog/flat-dropdown-menu-tutorial

 

I hope this helps. Thank you.