CSS菜单：由CSS滑动门技术实现的菜单十一款_DIV+CSS实例

教程Tag：暂无Tag,欢迎添加,赚取U币!

　　CSS滑动门技术开辟了一种新的思维，以新的视角来构建我们的CSS菜单，让其能自适应内部文字的大小，可以自由的进行滑动，具有更高的兼容性。
　　我们可以应用CSS滑动门技术来构建我们的CSS菜单，或许你对此并不是十分的熟悉，我们在这里提供了十一款CSS滑动门技术实现的CSS菜单，你可以将代码进行拆分、理解CSS滑动门技术的内涵。
　　假如你对滑动门很生疏，请参考下面的两篇文章：
　　CSS滑动门菜单是什么意思如何实现？　

　　下面是CSS滑动门技术实现的菜单十一款的效果图：

　　我们不必每一个菜单都展开，看第一个就可以了。其它的你可以自己分析一下。
　　看下面的XHTMl代码：

示例代码 [www.mb5u.com]

<div id="tabs">
<ul>
<li><a href="#" title="Link 1">Link 1</a></li>
<li><a href="#" title="Link 2">Link 2</a></li>
<li><a href="#" title="Link 3">Link 3</a></li>
<li><a href="#" title="Longer Link Text">Longer Link Text</a></li>
<li><a href="#" title="Link 5">Link 5</a></li>
<li><a href="#" title="Link 6">Link 6</a></li>
<li><a href="#" title="Link 7">Link 7</a></li>
</ul>
</div>

　　这是一个非常普通的无序列表。也是我们菜单的根基，我们通过CSS对它进行样式定义，看下面的CSS代码：

示例代码 [www.mb5u.com]

#tabs {
float:left;
width:100%;
background:#BBD9EE;
font-size:93%;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FF9834;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}