How to Create a Dropdown Menu in HTML and CSS

PDF download Download Article
PDF download Download Article

This wikiHow teaches you how to create a drop-down menu for your website by using HTML and CSS coding. The drop-down menu will appear when someone hovers over its button; once the drop-down menu appears, the user will be able to click one of the options in it to visit the option's webpage.

Steps

PDF download Download Article
  1. You can use a simple text editor, such as Notepad or TextEdit, or you can use a more advanced text editor like Notepad++ .
    • If you do decide to use Notepad++, make sure you select HTML from the "H" section of the Language menu at the top of the window before you proceed.
  2. This is the code that determines the code type used for the rest of the document: 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 >
    Advertisement
  3. Type in the following code to determine the size and color of the drop-down menu, making sure to replace "#" with the number you want to use (the larger the number, the larger your drop-down menu will be). You can also replace the "background-color" and "color" values with any color (or HTML color code) of your choice: [1] 
     . 
 dropbtn 
 { 
 background-color 
 : 
 black 
 ; 
 color 
 : 
 white 
 ; 
 padding 
 : 
 #px 
 ; 
 font-size 
 : 
 #px 
 ; 
 border 
 : 
 none 
 ; 
 }
  4. Since you'll be adding links to the drop-down menu later, you can place them inside the drop-down menu by entering the following code: 
     . 
 dropdown 
 { 
 position 
 : 
 relative 
 ; 
 display 
 : 
 inline-block 
 ; 
 }
  5. The following code will determine the drop-down menu's size, position when other webpage elements are involved, and color. Be sure to replace the "min-width" section's "#" with your preferred number (e.g., 250) and change the "background-color" heading to your preferred color or HTML code: 
     . 
 dropdown-content 
 { 
 display 
 : 
 none 
 ; 
 position 
 : 
 absolute 
 ; 
 background-color 
 : 
 lightgrey 
 ; 
 min-width 
 : 
 #px 
 ; 
 z-index 
 : 
 1 
 ; 
 }
  6. The following code addresses the drop-down menu's text color and the size of the drop-down menu's button. Be sure to replace "#" with your preferred number of pixels to dictate the size of the button: 
     . 
 dropdown-content 
 a 
 { 
 color 
 : 
 black 
 ; 
 padding 
 : 
 #px 
 #px 
 ; 
 text-decoration 
 : 
 none 
 ; 
 display 
 : 
 block 
 ; 
 }
  7. When you hover your mouse over the drop-down menu's button, you'll need a few colors to change. The first "background-color" line refers to the color change that will appear when you select an item in the drop-down menu, while the second "background-color" line refers to the color change of the drop-down menu's button. Ideally, both of these colors will be lighter than their appearance when not selected: 
     . 
 dropdown-content 
 a 
 : 
 hover 
 { 
 background-color 
 : 
 white 
 ;} 
 . 
 dropdown 
 : 
 hover 
 . 
 dropdown-content 
 { 
 display 
 : 
 block 
 ;} 
 . 
 dropdown 
 : 
 hover 
 . 
 dropbtn 
 { 
 background-color 
 : 
 grey 
 ;}
  8. Enter the following code to indicate that you're done with the CSS portion of the document: 
     </ 
 style 
 > 
 </ 
 head 
 >
  9. Enter the following code, making sure to replace "Name" with whatever you want the drop-down button's name to be (e.g., Menu ): 
     < 
 div 
 class 
 = 
 "dropdown" 
 > 
 < 
 button 
 class 
 = 
 "dropbtn" 
 > 
Name </ 
 button 
 > 
 < 
 div 
 class 
 = 
 "dropdown-content" 
 >
  10. Each of the items in the drop-down menu should link to something, be that a page on your website or an external website. You can add items to the drop-down menu by entering the following code, making sure to replace https://www.website.com with the link's address (keep the quotation marks) and "Name" with the link's name. 
     < 
 a 
 href 
 = 
 "https://www.website.com" 
 > 
Name </ 
 a 
 > 
 < 
 a 
 href 
 = 
 "https://www.website.com" 
 > 
Name </ 
 a 
 > 
 < 
 a 
 href 
 = 
 "https://www.website.com" 
 > 
Name </ 
 a 
 >
  11. Enter the following tags to close the document and indicate the end of the drop-down menu's code: 
     </ 
 div 
 > 
 </ 
 div 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
  12. Your code should look similar to the following: [2] 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 . 
 dropbtn 
 { 
 background-color 
 : 
 black 
 ; 
 color 
 : 
 white 
 ; 
 padding 
 : 
 16 
 px 
 ; 
 font-size 
 : 
 16 
 px 
 ; 
 border 
 : 
 none 
 ; 
 } 
 . 
 dropdown 
 { 
 position 
 : 
 relative 
 ; 
 display 
 : 
 inline-block 
 ; 
 } 
 . 
 dropdown-content 
 { 
 display 
 : 
 none 
 ; 
 position 
 : 
 absolute 
 ; 
 background-color 
 : 
 lightgrey 
 ; 
 min-width 
 : 
 200 
 px 
 ; 
 z-index 
 : 
 1 
 ; 
 } 
 . 
 dropdown-content 
 a 
 { 
 color 
 : 
 black 
 ; 
 padding 
 : 
 12 
 px 
 16 
 px 
 ; 
 text-decoration 
 : 
 none 
 ; 
 display 
 : 
 block 
 ; 
 } 
 . 
 dropdown-content 
 a 
 : 
 hover 
 { 
 background-color 
 : 
 white 
 ;} 
 . 
 dropdown 
 : 
 hover 
 . 
 dropdown-content 
 { 
 display 
 : 
 block 
 ;} 
 . 
 dropdown 
 : 
 hover 
 . 
 dropbtn 
 { 
 background-color 
 : 
 grey 
 ;} 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 div 
 class 
 = 
 "dropdown" 
 > 
 < 
 button 
 class 
 = 
 "dropbtn" 
 > 
Social Media </ 
 button 
 > 
 < 
 div 
 class 
 = 
 "dropdown-content" 
 > 
 < 
 a 
 href 
 = 
 "https://www.google.com" 
 > 
Google </ 
 a 
 > 
 < 
 a 
 href 
 = 
 "https://www.facebook.com" 
 > 
Facebook </ 
 a 
 > 
 < 
 a 
 href 
 = 
 "https://www.youtube.com" 
 > 
YouTube </ 
 a 
 > 
 </ 
 div 
 > 
 </ 
 div 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    13. Advertisement

Community Q&A

Search
Add New Question
  • Question
    I just made a dropdown menu using these instructions and it worked. How do I move/change the position of my drop down menu in HTML?
    Community Answer
    To move this dropdown menu, cut out the tags that signify the dropdown (particularly, cut out the code between and its closing pair) and paste them somewhere else. Additionally, you can add some code to the style for the dropdown class such as float, to align the menu to your liking.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 14 Helpful 15
  • Question
    What is the difference between delete, drop, and truncate in Oracle?
    Community Answer
    Delete: delete a row in a table. Truncate: delete all rows in a table. Drop: delete structure of a table.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 6 Helpful 8
  • Question
    Where in the head section can I link a stylesheet?
    Community Answer
    You can link a stylesheet (CSS, LessCSS, SCSS, SASS) anywhere in your tags, provided that your head tags are after the opening tag and before the opening tag.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 6 Helpful 6
See more answers
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Tips

      • The above instructions are for a drop-down menu which will activate when you hover your mouse cursor over the drop-down menu's button. If you want to create a drop-down menu that only appears when clicked, you'll need to use JavaScript. [3]
        Thanks
        Helpful 0 Not Helpful 0
      • Always test your code before posting it on your website.
        Thanks
        Helpful 0 Not Helpful 0
      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!
      Advertisement

      Warnings

      • HTML colors are relatively limited when using tags such as "black" or "green". You can find an HTML color code generator that will allow you to create and use a custom color here .
        Thanks
        Helpful 0 Not Helpful 0
      Advertisement

      You Might Also Like

      4 Ways to Add a Link to a Picture
      How to
      Run a HTML File in Visual Studio Code
      How to
      Insert Spaces in HTML
      How to
      Create a Simple Web Page with HTML
      How to
      Write HTML Code
      How to
      Run a HTML File
      How to
      Insert Images with HTML
      How to
      Change the Button Color in HTML
      Add a Background Image to a Website: Step-by-Step Tutorial
      How to
      Open HTM Files
      Simple Ways to Find the Hex Code of Any Color on Your Computer
      How to
      Resize iFrames in HTML
      How to
      Make a Birthday Card with HTML and CSS
      How to
      Copy HTML Source Code on Your Computer, iPhone, or Android
      Advertisement

      References

      1. ↑ https://www.w3schools.com/howto/howto_css_dropdown.asp
      2. ↑ https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover
      3. ↑ https://www.w3schools.com/howto/howto_js_dropdown.asp

      About This Article

      Article Summary X

      1. Add " .dropdown" class to the style code.
      2. Define the appearance.
      3. Add the class to the HTML code in a "div" tag.
      4. Add the menu links.
      5. Close the "div" tag.
      6. Save your document.

      Did this summary help you?
      In other languages
      Thanks to all authors for creating a page that has been read 895,019 times.

      Is this article up to date?

      Advertisement