Jump to content


Photo

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

css html submenu dropdownlist

  • Please log in to reply
3 replies to this topic

#1 purna_ch

purna_ch

    Newbie

  • New Members
  • Pip
  • 1 posts

Posted 08 August 2014 - 11:29 AM

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.

 



#2 CroNiX

CroNiX

    Advanced Member

  • Gurus
  • 823 posts
  • LocationPortland, OR

Posted 08 August 2014 - 02:30 PM

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



#3 Zane

Zane

    Advanced Member

  • Administrators
  • 3,869 posts
  • LocationMurphy, NC

Posted 09 August 2014 - 09:00 AM

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.


btn_donate_SM.gif Want to thank me? Contribute to my PayPal piggy-bank

401299.png

#4 WebOutGateway

WebOutGateway

    Member

  • Members
  • PipPip
  • 20 posts

Posted 11 August 2014 - 09:43 PM

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.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com