Jump to content

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


purna_ch

Recommended Posts

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;
}



 

You may also want to take a look at this: 


 

I hope this helps. Thank you.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.