CSS Glossy Menu

Create a beautiful CSS Glossy menu:

Demo

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

 
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 »