il codice puoi prenderlo dalla pagina stessa, questo e' quanto serve
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Stu Nicholls | CSSplay | A css only dropdown menu further examples</title>
<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_examples.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */
.menu1 {
float:left; width:100%; font-family: verdana, arial, sans-serif; font-size:11px;
background:url(images/menu1.gif) repeat-x top left;
border-top:3px solid #4c597f; border-bottom:3px solid #4c597f;
margin:0 0 20px 0; /* for this demo only */
}
.menu1 ul {
padding:0;margin:0;list-style-type:none;
}
.menu1 ul li {
float:left; position:relative; background:url(images/divider1.gif) no-repeat top right;
}
.menu1 ul li a, .menu1 ul li a:visited {
float:left; display:block; text-decoration:none;color:#ddf; padding:0px 16px; line-height:25px; height:30px; border-bottom:3px solid #fff;
}
.menu1 ul li:hover {width:auto;}
.menu1 ul li a.menu1one:hover {border-color:#c00; color:#f88;}
.menu1 ul li a.menu1two:hover {border-color:#c60; color:#fc0;}
.menu1 ul li a.menu1three:hover {border-color:#cc0; color:#cc0;}
.menu1 ul li a.menu1four:hover {border-color:#080; color:#0e0;}
.menu1 ul li a.menu1five:hover {border-color:#00c; color:#aaf;}
.menu1 ul li a.menu1six:hover {border-color:#c0c; color:#f8f;}
.menu1 ul li:hover a.menu1one {border-color:#c00; color:#f88;}
.menu1 ul li:hover a.menu1two {border-color:#c60; color:#fc0;}
.menu1 ul li:hover a.menu1three {border-color:#cc0; color:#cc0;}
.menu1 ul li:hover a.menu1four {border-color:#080; color:#0e0;}
.menu1 ul li:hover a.menu1five {border-color:#00c; color:#aaf;}
.menu1 ul li:hover a.menu1six {border-color:#c0c; color:#f8f;}
.menu1 ul li ul {
display: none;
}
.menu1 table {
margin:0; border-collapse:collapse; font-size:11px; position:absolute; top:0; left:0;
}
/* specific to non IE browsers */
.menu1 ul li:hover ul {
display:block;position:absolute;top:32px;margin-top:1px; left:0;width:154px;border-bottom:1px solid #000;
}
.menu1 ul li:hover ul.endstop {
left:-92px;
}
.menu1 ul li:hover ul li ul {
display: none;
}
.menu1 ul li:hover ul li a {
display:block;background:#fff;color:#000;height:auto;line-height:15px;padding:4px 16px; width:120px; border:1px solid #000; border-bottom:0;
}
.menu1 ul li:hover ul li a.drop {
background:#ccd url(images/bullet1.gif) no-repeat 3px 8px;
}
.menu1 ul li:hover ul li a:hover {
color:#000; background: #ccd url(images/bullet1.gif) no-repeat 3px 8px;
}
.menu1 ul li:hover ul li a:hover.drop {
background: #ccd url(images/bullet1.gif) no-repeat 3px 8px;
}
.menu1 ul li:hover ul li:hover ul {
display:block; position:absolute; left:153px; top:-1px;
}
.menu1 ul li:hover ul li:hover ul.left {
left:-153px;
}
/* specific to IE5.5 and IE6 browsers */
.menu1 ul li a:hover ul {
display:block;position:absolute;top:30px; t\op:33px; background:#fff;left:0; border-bottom:1px solid #000;
}
.menu1 ul li a:hover ul.endstop {
left: -92px;
}
.menu1 ul li a:hover ul li a {
display:block;background:#fff;color:#000; height:1px; line-height:15px; padding:4px 16px; width:154px; w\idth:120px; border:1px solid #000; border-bottom:0;
}
.menu1 ul li a:hover ul li a.drop {
background:#ccd url(images/bullet1.gif) no-repeat 3px 8px; padding-bottom:4px;
}
.menu1 ul li a:hover ul li a ul {
visibility:hidden; position:absolute; height:0; width:0;
}
.menu1 ul li a:hover ul li a:hover {
color:#000; background: #ccd url(images/bullet1.gif) no-repeat 3px 8px;
}
.menu1 ul li a:hover ul li a:hover.drop {
background: #ccd url(images/bullet1.gif) no-repeat 3px 8px;
}
.menu1 ul li a:hover ul li a:hover ul {
visibility:visible; position:absolute; top:0;color:#000; left:153px;
}
.menu1 ul li a:hover ul li a:hover ul.left {
left:-153px;
}
</style><!--[if lte IE 5.5]>
<style type="text/css">
.menu1 ul li a, .menu1 ul li a:visited {height:33px;}
</style>
<![endif]-->
</head>
<body>
<div class="menu1">
<ul>[*]Home[/list]
<ul>[*]<a class="menu1two" href="#nogo">Products
</a>
<table><tbody><tr><td>
<ul>
[*]Mobiles
[*]Photoframes
[*]Tripods
[*]Memory cards
[*]<a class="drop" href="#nogo">Cameras
</a>
<table><tbody><tr><td>
<ul>
[*]SLRs
[*]Compact
[*]Digital
[*]Video
[/list]
</td></tr></tbody></table>
[*]Camcorders
[*]Accessories
[/list]
</td></tr></tbody></table>
[*]<a class="menu1three" href="#nogo">Services
</a>
<table><tbody><tr><td>
<ul>
[*]Photography
[*]Video editing
[*]Web site Design and Hosting
[*]Reference guides
[*]Tutorials
[/list]
</td></tr></tbody></table>
[*]Contact us[*]Site map[*]<a class="menu1six" href="#nogo">News
</a>
<table><tbody><tr><td>
<ul class="endstop">
[*]Breaking
[*]Latest
[*]May 2006
[*]<a class="drop" href="#nogo">News archives and articles
</a>
<table><tbody><tr><td>
<ul class="left">
[*]April 2006
[*]March 2006
[*]February 2006
[*]January 2006
[/list]
</td></tr></tbody></table>
[/list]
</td></tr></tbody></table>
[/list]
</div>
</body>
</html>
se ti piace e vuoi usarlo leggi la nota sul copyright a fine pagina
ciao