Table2CSS logo Table2CSS is a tool that can convert your table-based websites to tableless layouts, replace deprecated HTML tags with modern CSS and reformat your HTML code. Click here for more information

How to create in CSS a vertical drop-down menu that is search-engine friendly

In our previous article we have explained how to create a horizontal drop-down navigation menu in HTML and CSS with very little JavaScript code. However in some cases the website layout requires that a vertical drop-down menu is used instead of a horizontal one. This could happen for example when the navigation is structured as a vertical sidebar on the left or right side of the web page. That is why in this article we will explain how to modify the navigation menu from the previous article and give the menu a vertical layout. Again the menu will work on Internet Explorer, Firefox and Opera.

A live demonstration of our vertical drop-down menu written in HTML and CSS

Below is a live demo of our drop-down menu.

The color, font styles and other properties of the drop-down menu are fully customizable through the menu CSS file. The actual number of drop-down menu items as well as their titles (captions) are customizable by editing the actual HTML code of the menu.

How to install the menu on your web page and how to customize it?

In order to install the drop-down menu on your website, follow these steps:

  • Download these two files and place them in the root directory of your website or in a subdirectory where they would be accessible by client's web browsers.

    css_vertical_menu.css
    css_vertical_menu.js

  • Add the following two lines to the <head> section of your web page:
    <link type="text/css" rel="stylesheet" media="all" href="css_menu.css" />
    <script type="text/javascript" src="css_menu.js"></script>
    
  • Insert the actual HTML content for your menu into the <body> section of your web page. In our sample demo we used the following HTML code:
    <ul class="css_menu" style="margin: 30px auto; width: 496px;">
    	<li>
    		<a href="#">Vehicles</a>
    		<ul>
    			<li><a href="#">Cars</a> </li>
    			<li><a href="#">Planes</a> </li>
    			<li><a href="#">Trains</a> </li>
    		</ul>
    	</li>
    	<li>
    		<a href="#">Buildings</a>
    		<ul>
    			<li><a href="#">Houses</a> </li>
    			<li><a href="#">Malls</a> </li>
    			<li><a href="#">Schools</a> </li>
    		</ul>
    	</li>
    	<li><a href="#">Other</a></li>
    </ul>
    

In order to adjust the menu items and their captions, just edit the sample HTML code that we provided above. The <ul> tags in our code wrap blocks of menu items and the <li> tags wrap separate menu items. Most likely you will want to change the URLs pointed at by the separate menu items. To do that edit the <a href="#"> tags for the corresponding menu items and replace the # sign with the actual URL which should be visited when the user clicks on the menu item.

In order to modify the look of your drop-down menu, edit the css_vertical_menu.css file. there are comments delimiting the two main groups of definitions in that file - the definitions of the vertical (top) menu items and the definitions for the secondary drop-down boxes of the sub-menus.

Internal details of the implementation of our horizontal drop-down menu

For details on the internal implementation of our drop-down menu refer to our previous article about horizontal drop-down menus.