一个彩条菜单，鼠标滑过，菜单会变大
在网页<head>区添加样式定义
<style type="text/css">
#easel {width:75px; height:100px; margin:3em auto;}
#painters {
padding:0;
margin:0;
list-style-type:none;
}
#painters li {
width:75px;
height:20px;
float:left;
border:1px solid #000;
margin-right:2px;
}
#painters a em {
font-style:normal;
font-size:1em;
line-height:1.5em;
}
#painters a {
text-decoration:none;
color:#000;
position:absolute;
width:75px;
height:20px;
display:block;
text-align:center;
}
#painters a.red {background:#c00; color:#fff;}
#painters a.orange {background:#fc0; color:#000;}
#painters a.yellow {background:#ee0; color:#000;}
#painters a.green {background:#080; color:#fff;}
#painters a.blue {background:#00c; color:#fff;}
#painters a:hover {
width:120px;
height:28px;
z-index:200;
background:#aaa;
}
#painters a:hover em {
font-size:1.5em;
line-height:1.1em;
overflow:hidden;
cursor:pointer;
background:#fff;
border:1px solid #000;
position:absolute;
width:120px;
height:25px;
left:-12px;
top:-8px;
}
#painters a:hover.red em {background:#c00;}
#painters a:hover.orange em {background:#fc0;}
#painters a:hover.yellow em {background:#ee0;}
#painters a:hover.green em {background:#080;}
#painters a:hover.blue em {background:#00c;}
#easel2 {width:395px; height:30px; margin:3em auto;}
#painters2 {
padding:0;
margin:0;
list-style-type:none;
}
#painters2 li {
width:75px;
height:20px;
float:left;
border:1px solid #000;
margin-right:2px;
}
#painters2 a em {
font-style:normal;
font-size:1em;
line-height:1.5em;
}
#painters2 a {
text-decoration:none;
color:#000;
position:absolute;
width:75px;
height:20px;
display:block;
text-align:center;
}
#painters2 a.red {background:#c00; color:#fff;}
#painters2 a.orange {background:#fc0; color:#000;}
#painters2 a.yellow {background:#ee0; color:#000;}
#painters2 a.green {background:#080; color:#fff;}
#painters2 a.blue {background:#00c; color:#fff;}
#painters2 a:hover {
width:120px;
height:28px;
z-index:200;
background:transparent url(../ads/opaque.gif);
}
#painters2 a:hover em {
font-size:1.5em;
line-height:1.1em;
overflow:hidden;
cursor:pointer;
background:#fff;
border:1px solid #000;
position:absolute;
width:120px;
height:25px;
left:-12px;
top:-4px;
}
#painters2 a:hover.red em {background:#c00;}
#painters2 a:hover.orange em {background:#fc0;}
#painters2 a:hover.yellow em {background:#ee0;}
#painters2 a:hover.green em {background:#080;}
#painters2 a:hover.blue em {background:#00c;}
</style>
在网页<body>区添加以下代码
<div id="easel"> <ul id="painters"> <li><a class="red" href="http://www.sharejs.com"><em>Monet</em></a></li> <li><a class="orange" href="#nogo"><em>Constable</em></a></li> <li><a class="yellow" href="#nogo"><em>Renoir</em></a></li> <li><a class="green" href="#nogo"><em>Turner</em></a></li> <li><a class="blue" href="#nogo"><em>Matisse</em></a></li> </ul> </div> <div id="easel2"> <ul id="painters2"> <li><a class="red" href="#nogo"><em>Monet</em></a></li> <li><a class="orange" href="#nogo"><em>Constable</em></a></li> <li><a class="yellow" href="#nogo"><em>Renoir</em></a></li> <li><a class="green" href="#nogo"><em>Turner</em></a></li> <li><a class="blue" href="#nogo"><em>Matisse</em></a></li> </ul> </div>
