CSS Glossy Menu

m5 design studio logo

Create a beautiful CSS Glossy menu:



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

CSS Code

list-style-type: none;
margin: 5px;
padding: 0;
width: 180px;

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

#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


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.