本文介绍了一个名为TabMenuF的菜单样式实现方法，通过CSS样式定义了浮动菜单栏及其交互效果，并展示了具体的HTML结构和样例链接。
<html>
<head>
<style type="text/css">
/*- Menu Tabs F--------------------------- */
#tabsF {
float:left;
width:100%;
background:#efefef;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url('tabrightF.gif'); background-repeat: no-repeat; background-position: left top
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url('tabrightF.gif'); background-repeat: no-repeat; background-position: right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac /*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}
</style>
</head>
<body>
<h2>Tab Menu F</h2>
<h2>Tab Menu F</h2>
<div id="tabsF">
<ul>
<li><a href="http://www.nkcn.net/java" title="Link 1"><span>Link 1</span></a></li>
<li><a href="http://www.nkcn.net/java" title="Link 2"><span>Link 2</span></a></li>
<li><a href="http://www.nkcn.net/java" title="Link 3"><span>Link 3</span></a></li>
<li><a href="http://www.nkcn.net/java" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="http://www.nkcn.net/java" title="Link 5"><span>Link 5</span></a></li>
<li><a href="http://www.nkcn.net/java" title="Link 6"><span>Link 6</span></a></li>
<li><a href="http://www.nkcn.net/java" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
