Dynamic Drive CSS Library- Glossy Vertical Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Social Media Applications

Advertise Here

CSS Library: Vertical CSS Menus: Here

Glossy Vertical Menu

Author: Dynamic Drive

This is a CSS vertical menu that uses a thin, repeating background image that changes when the mouse moves over a link. The image is glossy looking with an indent at the bottom to create a nice separation between links.

Demo:

The two images used:

The CSS:

<style type="text/css">

.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 170px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}

.glossymenu li a{
background: white url(media/glossyback.gif) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;

}


* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 160px;
}

.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}

.glossymenu li a:hover{
background-image: url(media/glossyback2.gif);
}

</style>

The HTML:

<ul class="glossymenu">
<li><a href="http://www.dynamicdrive.com/" >Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >CSS Examples</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a></li>		
</ul>

Code Info

Rate this code:

Date Posted: 06/02/2006

Revision History: None

Usage Terms: Click here

Your Comments (133)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 9 of 14 pages « First < 7 8 9 10 11 > Last »

Good code, but I'm getting bullets.
Interestingly, this only happens in Firefox, and not IE (IE gets it right for once *hold the presses*).
I've put the CSS code in the site's stylesheet, but it's just this bullet point thing appearing that's maddening.
Any ideas why FF does this for this sort of menu, and how to fix it?
A++

Posted by Alex on 04/27, 11:23 PM

hi can enyone plz tell me how to add submenus for this menu...

Posted by manusharma on 05/22, 12:38 AM

very nice and simple menu

Posted by Omar Abid on 06/08, 08:30 AM

I like the Glossy Vertical Menu. But, how do I make the sub-menu relatively expanded right beneath the main menu?
- The "top" parameter works for vertical level
- But, the "left" parameter does not do anything!
Thank you.

The CSS code follows:
.glossymenu li ul{ /*SUB MENU STYLE*/
position: relative;
width: 125px; /*WIDTH OF SUB MENU ITEMS*/
left: 50;
top: 0;
display: none;
filter:alpha(opacity=100);
-moz-opacity:1;
}
</pre>

Posted by Allan on 06/09, 03:33 PM

HI, I like the css buttons and forms, I already start to study css.
The first thing I need is where do I paste the first codes

if is after this codes or not
<html>
<head>
<body>

also need the codes for my contact form. I had it working right before but I don't know what happen with my php form, now it doesn't want to work. I'm just starting this way of web designer. Can you help me please. I can't find books of java or css that have the form to send emails.Thanks sincerely Joseph

Posted by Joseph on 06/14, 07:47 PM

Joseph, I used FormMailer form to send emails.
Visit "http://www.big-llc.com/formmailer/?linkback=1" for detail.

Posted by Allan on 06/20, 11:27 AM

Can any one tell me how to make this work in Firefox????

Posted by KB on 06/27, 10:16 AM

Hi

Can someone send me the Glossy Verticle Menu with mouseover Sub-Navigation popup

here is my email address (encoded):

imran [dot] 007 [at] gmail [dot] com

Thanks

Posted by Imran on 06/28, 09:05 AM

I would also be very appreciative for the Glossymenu Vertical style with Submenu's and Thanks to the author for a great menu!

toothmkr57@twmi.rr.com

Posted by Paul on 06/28, 10:19 PM

Wow, really anyone who could send this to mee I would seriously appreciate it!

Posted by Paul on 06/29, 09:45 PM

Comment Pages 9 of 14 pages « First < 7 8 9 10 11 > Last »