CSS菜單：由CSS滑動門技術實現的菜單十一款_DIV+CSS實例

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　CSS滑動門技術開辟了一種新的思維，以新的視角來構建我們的CSS菜單，讓其能自適應內部文字的大小，可以自由的進行滑動，具有更高的兼容性。
　　我們可以應用CSS滑動門技術來構建我們的CSS菜單，或許你對此并不是十分的熟悉，我們在這里提供了十一款CSS滑動門技術實現的CSS菜單，你可以將代碼進行拆分、理解CSS滑動門技術的內涵。
　　假如你對滑動門很生疏，請參考下面的兩篇文章：
　　CSS滑動門菜單是什么意思如何實現？　

　　下面是CSS滑動門技術實現的菜單十一款的效果圖：

　　我們不必每一個菜單都展開，看第一個就可以了。其它的你可以自己分析一下。
　　看下面的XHTMl代碼：

示例代碼 [m.ghpqjb.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代碼：

示例代碼 [m.ghpqjb.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;
}