CSS Glossy Menu

Create a beautiful CSS Glossy menu:

Demo

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

HTML Code

<ul id="glossymenu">

  <li><a href="page.html" >menu item 1</a></li>

  <li><a href="page.html" >menu item 2</a></li>

  <li><a href="page.html" >menu item 3</a></li>

  <li><a href="page.html" >menu item 4</a></li>

  <li><a href="page.html" >menu item 5</a></li> 

</ul>

CSS Code

#glossymenu{
list-style-type: none;
margin: 5px;
padding: 0;
width: 180px;
line-height:30px;
text-align:center;
}

#glossymenu li a{
  width: 180px;
  text-decoration: none;
  background: url(images/glossyback2.gif) repeat-x bottom left;
  font-size: 17px;
  font-family: arial, Verdana ;
  color: white;
  display: block;
  padding: 3px;
  line-height:30px;
text-align:center;
}

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

#glossymenu li a:hover{
  background-image: url(images/glossyback.gif);
  color: #000000;
  }


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