CSS Horizontal Menu

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

Demo:

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;
  }

Category: CSS Tags: , No Comments
orlando web design company

How to add animation to a website

Orlando Web Design Company Small, simple animations are fun and interesting! They can keep your users engaged and spice... Read More »
orlando web deisgn bootstrap

Customizing Bootstrap

Orlando Web Design & Development Twitter's Bootsrap is a powerful front-end framework for faster and easier web dev... Read More »
web design orlando lesson 6

Orlando Web Design: CSS Page Layout – Understanding CSS Positioning

Orlando Web Design & Development CSS Page Layout: Understanding CSS Positioning There are 3 ways of creating CSS l... Read More »