Horizontal Drop-Down Menu Using CSS

Using a drop-down menu to display sub-menus can make your page look more professional. But, if you’re like me, rather than use JAVA or jQuery, you’ll look for the easiest way to do this. And, as far as I’m concerned, those nice drop-down menus can easily be had using basic HTML to write an unordered list, and then configuring the display in a CSS (Cascading Style Sheet) bit of code.

I’m not one to re-invent the wheel, so I’m giving you the link where all of this is explained in detail. Get details here.  However, to make things easier so you don’t have to create the documents as you read, I have placed the complete CSS code on a page (link below) where all you have to do is copy and paste it into a Text Editor. Once this is done, you MUST save the CSS code as a Text Only document giving it a name with the extension .css, i.e, mymenu.css, or it will not work.

Visit this link to see the menu in action

Depending on your website, you can customize the HTML code for the number of Menu Headings and Sub-menu headings that you need. You can also make any changes to the CSS text document if you want to change the background or font colors to blend with your website. Otherwise leave as is. Before starting any of this, take a few minutes to read through the information at the other link to understand how the CSS works and how the code is structured.

The information covered there includes:

  •  How the HTML structure of menu / sub-menu is written
  • How the menu displays – left or right justification
  • How to determine the color of the background for menu and sub-menu
  • How to determine the color of the fonts for menu and sub-menu
  • How to set font size

NOTE: The colors for backgrounds and fonts are in hex triplet colors – not hexadecimal. This is a link to a page where you can get hex triplet colors designations for use.  Not all hexadecimal colors have a corresponding hex triplet color.

The HTML code for the sample page can be found here. Again, just copy and paste, then replace the Menu, Sub-menu titles with your own names and put in the links. For the sample, there are seven (7) main menu links with six (6) of them having three (3) sub-menus each. You can adjust these to meet your needs. Place into an HTML document and save.

The CSS code can be on the page (placed in the section), or uploaded to the domain’s root directory using an FTP program. If you upload the CSS code, make sure you reference the stylesheet in the HTML document’s section using the following string of code, where ptem.css would be replaced with the name you have given to your .css page.   Get the CSS code here.


 Want to use a vertical menu, where the sub-menus display to the side? Check back next time where we’ll cover how to do this.

Comments are closed.