CSS Horizontal Menu

m5 design studio logo

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



<div id="primary_menu" >
<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>

CSS Code

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


#primary_menu li{
  display: inline;
  margin: 0;
  font-weight: bold;



#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


M5 Design Studio

We are a small, but creative and passionate team of designers and developers specializing in web design, graphic design, branding & digital marketing.

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

Comments are closed.