CSS Horizontal Menu

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

CSS Horizontal Menu

First, we'll create a horizontal menu that looks like this: Horizontal Menu We will follow these steps:

  1. Remove all the default list styling. We can do this using Eric Meyer's reset CSS, which contains the following rule:
    ol, ul {
    	list-style: none;
    }
  2. Set the width and margin of the menu.
    #mainMenu {
    	margin:10px;
    	width:900px;
    	font-family: "Trebuchet MS";
    }
    Setting the width prevents the menu from wrapping when the user shrinks the browser window.
  3. Set the list items to display as blocks. We'll also give them a width, float them to the left so that they'll each come up to the right of the preceding item, and give them a margin border.
    #mainMenu li {
    	display:block;
    	width:120px;
    	float:left;
    	margin-left:2px;
    	border:1px solid #000;
    }
  4. Change the a elements to block-level elements. We'll also add some formatting styles and remove the underline with text-decoration: none.
    #mainMenu a {
    	display:block;
    	padding:3px;
    	text-decoration:none;
    	background-color:#fff;
    	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;
    }

That's it. The full CSS code is shown below:

Code Sample:

CssListMenus/Demos/CssMenu-horizontal.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:900px;
		font-family: "Trebuchet MS";
	}
	#mainMenu li {
		display:block;
		width:120px;
		float:left;
		margin-left:2px;
		border:1px solid #000;
	}
	
	#mainMenu a {
		display:block;
		padding:3px;
		text-decoration:none;
		background-color:#fff;
		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-horizontal.html in your browser to see it in action.

Next