CSS Horizontal Menu

Create a simple HTML bullet list menu and style it with CSS:

Demo:

• menu item 1
• menu item 2
• menu item 3
• menu item 4
• menu item 5

HTML Code

<div id="primary_menu" >
<ul>
<li><a href="#" >menu item 1</a></li>
<li><a href="#">menu item 2</a></li>
<li><a href="#" >menu item 3</a></li>
<li><a href="#" >menu item 4</a></li>
<li><a href="#" >menu item 5</a></li>
</ul>
</div>

CSS Code

#primary_menu ul{
  margin: 0;
  padding: 0;
  list-style-type: none;

}



#primary_menu li{
  display: inline;
  margin: 0;
  color:#FFFFFF;
  font-weight: bold;
  font-size:14px;
  font-family:Verdana;

  }

 

#primary_menu li a{
  float: left;
  display: block;
  text-decoration: none;
  margin: 0;
  padding: 8px; /*padding inside each tab*/
  border-right: 1px solid white; /* line divider between tabs*/
  color: white;
  background: #414141; /*background of tabs */
}



#primary_menu li a:visited{
  color: white;
}


#primary_menu li a:hover{
  background: black; /*background of tabs for hover state*/
}



#primary_menu li a:active{
  color: white;
  }