Simple HTML Drop Down Menu Generator


  • The following wizard generates the code necessary for your own simple drop down menu. Each option on your menu will link to a selected page. Options are also given for you to select the colors and fonts.


  1. Fill in the information required for your drop down menu
  2. Generate the HTML and JavaScript code for your menu (button at bottom)
  3. You can preview your script (button at bottom)
  4. Copy and Paste the Source Code into your HTML page



  • If you choose Page changes when menu changes, no action can occur for the first Link Address
  • You can leave Link Address blank on the lines where you want the text entry to act as a divider or a menu header

When and how to change the page

Menu Properties
Menu Name:
(change menu name if multiple menus on one page)
Custom Target:
Target Name:
Dropdown Menu Entries
Text Shown Link Address

Custom Colors/Styles

(Check the above box to enable these Style Sheet options)
Text Color Background Color
[pick] [pick]
Font Family Custom Font

Font Style Font Size

Source Code


Ok, One of my text entries in the drop down list is long. The box then stretches too far to accommodate the text, even running off the edge of the screen! How do you make it so that the box is locked in a specific width and the text adjusts itself to form 2 lines? Shortening the title of my text is not an option for me, but breaking it into two lines is ok. Please, can you help?

There is no way to wrap it to use 2 lines. However, you can force a certain width to the select box. Add a style="width:200px;" property to the <select> tag like <select name="menu" style="width:200px;"> (exact code will vary depending on which type of menu you are using)

Thank you for the code! The drop down menu appears to be on the top left hand corner of the window. How do I change it's position?

You can change the position by placing the menu code inside a container with alignment set:

<div style="text-align:right;"> menu code </div>

Really a great web page - thank you! (permanent book mark)
This may be to simple a question but I would appreciate a response.
How would I string 5 of these in a row for a drop down navigation bar?
And is it possible to stack the same code into sub navigation menus?

You can place multiple menus on the same page. You'll just need to change the "Menu Name:" on each one to something unique (eg; Jump1, Jump2, Jump3, etc)

I'm terrible at coding and i really don't understand how to change the position of the drop down menu (Despite the fact that you've explained this already). Could you please explain it to me in a very simple way? (i'm sorry about my english)

Using the Source Code you generated above, place this tag before it:

<div style="text-align:right;">
and this closing tag after it:

this is how I set it up, but when I choose an option and click GO, it doesn't do anything

<select name="menu">
<option value="">BOOKSTORES</option>
<option value=""></option>
<option value="">--PAPERBACK--</option>
<option value="">Amazon</option>
<option value=""></option>
<option value="">--EBOOK--</option>
<option value="">Amazon</option>
<option value="">Kobo</option>
<option value="">Barnes & Noble</option>
<input type="button" onClick="[].value;" value="GO">

You generated it with "Custom Target: Different Window" but I'm guessing there isn't a "WindowName" that exists. Use this button instead:

<input type="button" onClick="[].value;" value="GO">