Content

• Steps
• Advice
• Warning

This wikiHow teaches you how to create drop-down menus on your website using HTML and CSS code. A drop-down menu will appear when the visitor hoveres the mouse pointer over the specified button; Next, they can click on one of the items to go to that option's website.

Steps

1. 

   Open HTML text editor. You can use a simple text editor (Notepad, TextEdit) or more advanced (Notepad ++).
   • If you decide to go to Notepad ++, you need to choose HTML from the "H" part of the menu Language (Language) at the top of the window before continuing.

2. 

   
   
   Enter a title for the document. Here is the code that determines the type of code to be used for the rest of the document:

3. 

   Create drop-down menu. Enter the following code to specify the size and color of the drop-down menu, remember to replace the "#" with the parameter you want to use (the larger the number, the bigger the drop-down menu will be). We can also replace the background color "background-color" and the color "color" with whatever color (or HTML color code) you want:

4. 

   
   
   Specify that you want to replace the links in the drop-down menu. Since you will then add links to the menu, you can replace them in the drop-down menu by entering the following code:

5. 

   Creates the appearance of the drop-down menu. The following code determines the size and color of the drop-down menu, including the position when combined with other elements on the web page. Don't forget to replace the "#" in the "min-width" section with the number you want (eg 250) and change the "background-color" (background color) header to a specific color or HTML code:

6. 

   
   
   Add details to the contents of the drop-down menu. The following code will specify the text color inside and the size of the drop-down menu button. Don't forget to replace the "#" with the number of pixels that defines the menu button size:

7. 

   Edits how the mouse pointer changes when hovered in the drop-down menu. When you hover the mouse pointer over the menu button some colors need to be changed. The "background-color" line will reflect the color changed when you select something in the drop-down menu, while the second "background-color" is the color the menu button will change to. Ideally, both of these colors should be lighter than when they were unselected:

8. 

   Close the CSS section. Enter the following code to specify that you're done with the CSS part of the document:

9. 

   Create a name for the menu button. Enter the following code but remember to replace "Name" with the name of the drop-down menu button (example: Menu):

10. 

    Add links to the menu. Each item in the drop-down menu will link to something, be it a page on the current website or an external website. Add your selection to the drop-down menu by entering the following code, of which you need to replace https://www.website.com with the link address (keep the parentheses) and replace "Name" with the link name.

11. 

    Close document. Enter the following tags to close the document and specify the code end of the drop-down menu:

12. 

    Review code specifies drop-down menu. The snippet will look something like this: Ads

Advice

• Always review the code before posting on the website.
• The instructions above are for drop-down menus that will work when you hover the mouse pointer over the menu button. If you want to create a drop-down menu that only clicks when you click, then you need to use JavaScript.

Warning

• The HTML coloration is quite limited when we use tags like "black" or "green". You can check out the HTML color code generator that allows users to create and use custom colors here.