CSS Vertical Menu Using Unordered Lists

A couple of weeks back we covered CSS horizontal drop down menus, today we’ll see how to code a vertical menu using CSS where the sub-level links display to the side. As before, I’ll not go into a lengthy discussion of what each line of code means, however, the link below is for those that would like to read a detailed explanation of each line. This will be helpful for those wanting to¬†make changes to display sizes, background colors, fonts, etc.

Vertical code explanation –

Some of the information covered is:

  • How the HTML structure of menu / sub-menu is written
  • How to set the color of the background for menu and sub-menu
  • How to set the color of the fonts for menu and sub-menu
  • How to set font size

Visit this link to see menu in action

For convenience, we’ve included a link below to ¬†the CSS code we used for our sample so that you can just copy/paste it to get links like ours. Of course the colors, size and number of links, and levels can be modified to accommodate your website. If you need more than one (1) sub-level of links, please visit the information link above for details on how to do this.

Remember: When coding the CSS code to use on your own website, don’t forget that it¬†MUST be saved in a Text Editor as a TEXT ONLY document with the extension .css after the name, i.e., mymenu.css – otherwise it will not work.

 Get CSS Code:

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. Note: Not all hexadecimal colors have a corresponding hex triplet color.

The HTML code for the sample page can be found at the link below. Again, just copy and paste, then replace the Menu, Sub-menu titles with your own names and put in your links. For the sample, there are seven (7) main menu links each one with 3 sub-levels. You can adjust these to meet your needs.   To remove a line in the sub-level menu, simply delete one of the

  • . . .
  • lines; to increase the number of sub-level lines,¬†add in¬†a
  • ¬† for each new sub-level¬†link needed.¬†¬†Do this by using¬†an¬†HTML editor¬†and saving the ¬†page¬†with the usual¬†.html extension.

    In our HTML¬†sample code, note the¬†sample.css” />¬† bit of code¬†in the header that¬†references the .css document.¬† For¬†our Text Only .css document¬†we named it¬† ‘sample’.¬†¬† You would¬†replace ‘sample’ with the name you choose to call your .css document.

    Get HTML Code Р

    The CSS code can be on the page, or uploaded to the domain’s root directory using an FTP program. If you choose to¬†upload the CSS code, make sure you reference the stylesheet in the¬† section of¬†each of the HTML document’s¬†pages where you want the vertical menu to appear¬†using the following string of code shown below¬†– ¬†where sample.css would be the name you have given to your .css page – or it will not work.

    Header Code:¬†¬†¬† sample.css” />

    Using Cascading Style Sheets on your website for menus and various other apsects of the page can make managing your website easier, since any changes you make to the CSS code affects every page where that uniquely named style sheet code appeaers in the header.

    Comments are closed.