CSS Vertical Menu

Contact Us or call 1-877-932-8228
CSS Vertical Menu

CSS Vertical Menu

Vertical menus are created in much the same way, but they're even easier. The steps below show how to create a menu that looks like this: CSS Vertical Menu

  1. Remove all the default list styling. Again we use Eric Meyer's reset CSS.
  2. Set the width and margin of the menu. This time we will make the menu much narrower as we're creating a vertical menu:
    #mainMenu {
    	margin:10px;
    	width:120px;
    	font-family: "Trebuchet MS";
    }
  3. Set the list items to display as blocks. We'll also set the border properties adding borders to the left, right and bottom edges and then adding a border to the top of only the first list item. We use the :first-child pseudo-class to do this.
    #mainMenu li {
    	display:block;
    	border:1px solid #000;
    	border-top:0px;
    }
    #mainMenu li:first-child {
    	border-top:1px solid #000;
    }
  4. Change the a elements to block-level elements. Again, we'll also add formatting styles and remove the underline with text-decoration:none.
    #mainMenu a {
    	display:block;
    	padding:3px;
    	text-decoration:none;
    	color:#009;
    }
    
  5. Finally, we change the hover state of the links so that they highlight when a user points to them:
    #mainMenu a:hover {
    	background-color:#009;
    	color:#fff;
    }

The full CSS code is shown below:

Code Sample:

CssListMenus/Demos/CssMenu-vertical.html
---- C O D E   O M I T T E D ----
<link type="text/css" rel="stylesheet" href="../reset-meyer.css">
<style type="text/css">
	#mainMenu {
		margin:10px;
		width:120px;
		font-family: "Trebuchet MS";
	}
	#mainMenu li {
		display:block;
		border:1px solid #000;
		border-top:0px;
	}
	#mainMenu li:first-child {
		border-top:1px solid #000;
	}
	#mainMenu a {
		display:block;
		padding:3px;
		text-decoration:none;
		color:#009;
	}
	#mainMenu a:hover {
		background-color:#009;
		color:#fff;
	}
</style>
---- C O D E   O M I T T E D ----

Code Explanation

Open CssListMenus/Demos/CssMenu-vertical.html in your browser to see it in action.

Next