<style>
#menu {
width:140px;
font-size:16px;
margin:0 auto;
padding:0px;
border:solid 1px #ccc;
}
#menu a,#menu a:visited {
text-decoration:none;
text-align:center;
color:#c00;
display:block;
padding:4px;
background-color:#fff;
border:solid 1px #fff;
position:relative;
width:130px;
}
#menu a:hover {
border-color:#F00;
}
#menu a span {
display:none;
position:absolute;
height:0;
width:0;
border:solid 8px #fff;
top:4px;
overflow:hidden;
}
#menu a:hover span.left {
display:block;
border-left-color:#c00;
left:8px;
}
#menu a:hover span.right {
display:block;
border-right-color:#c00;
right:8px;
}
#menu a:hover span.intro {
font-size:12px;
display:block;
position:absolute;
left:150px;
top:0px;
padding:5px;
width:100px;
height:auto;
background-color:#eee;
color:#000;
border:1px dashed #234;
}
</style>
</head>
<body>
<div id="menu">
<a href="#">
<span class="left"></span>
Home
<span class="right"></span>
<span class="intro">这里说明Home菜单项</span>
</a>
<a href="#">
<span class="left"></span>
Contact Us
<span class="right"></span>
<span class="intro">这里说明Contant Us菜单项</span>
</a>
<a href="#">
<span class="left"></span>
Web Dev
<span class="right"></span>
<span class="intro">这里说明Web Dev菜单项</span>
</a>
<a href="#">
<span class="left"></span>
Web Design
<span class="right"></span>
<span class="intro">这里说明Web Design菜单项</span>
</a>
<a href="#">
<span class="left"></span>
Map
<span class="right"></span>
<span class="intro">这里说明Map菜单项</span>
</a>
</div>
[
本帖最后由 aaahsh7 于 2008-6-19 16:58 编辑 ]
