Cách tạo Menu ngang cho Blogspot bằng CSS [Phần 1]

B1. Đăng nhập vào tài khoản Blogger
B2. Vào phần thiết kế (Design)
B3. Chọn Phần Tử Trang
B4. Chọn Thêm tiện ích .
B5. Thêm tiện ích HTML/Javarscip, Copy & paste đoạn code trong các mẫu dưới đây vào phần thông tin  

B6. Dưới đây mình đã tổng hợp 1 số mẫu cho các bạn lựa chọn.

Mẫu 1

Menu ngang cho blogspot

<style>
#bt4unavmenu{height:46px;display:block;overflow:hidden;padding:5px 0;margin-bottom:6px;border:1px solid #333;-moz-border-radius:07px; -khtml-border-radius:07px;-moz-border-radius:15px; -khtml-border-radius:15px;box-shadow:0px 0px 15px #252525;
-webkit-box-shadow:0px 0px 10px #252525;
-moz-box-shadow: 0px 0px 10px #252525;background:#222 url() left top repeat-x}
#bt4unavmenu .current-cat a{background:#4AA02C url() top left repeat-x;color:#FFF;-moz-border-radius:15px; -khtml-border-radius:15px;border:1px solid #111}
#bt4unav a,#subMenusContainer a{text-decoration:none;display:block}
#bt4unav a{margin:0;float:left;background:none;padding:15px 15px 15px 15px;color:#fff;text-transform:uppercase;font-weight:bold;font-size:12px;border:1px solid #222}
#bt4unav li a:hover,#bt4unav li a:focus,#bt4unav a.mainMenuParentBtnFocused{background:#8eda22 url() top left repeat-x;color:#fff;-moz-border-radius:15px; -khtml-border-radius:15px;border:1px solid #333}
#bt4unav,#bt4unav ul,#bt4unav ol,#subMenusContainer ul,#subMenusContainer ol{padding:0;margin:0;list-style:none;line-height:1em}
#bt4unav ol,#bt4unav ul,#subMenusContainer ul,#subMenusContainer ol{background:none;left:0}
#bt4unav li{cursor:pointer;float:left;margin:0 2px 0 0;padding:0 2px 0 4px;height:44px;display:inline;background:url() left center no-repeat}
#bt4unav li:first-child{background:none;padding:0 2px 0 0}
#bt4unav{width:940px;margin:0 auto;clear:both;overflow:hidden;font-size:12px;display:block}
</style>
<div id='bt4unavmenu'>
<ul id='bt4unav'>
<li class='current-cat'><a href='http://thuviendownloadebook.blogspot.com/'>Home</a></li>
<li><a href='#'>Menu1</a></li>
<li><a href='#'>Menu2</a></li>
<li><a href='#'>Menu3</a></li>
<li><a href='#'>Menu4</a></li>
<li><a href='#'>Menu5</a></li>
<li><a href='#'>Menu6</a></li>
<li><a href='#'>menu7</a></li>
</ul>
</div>

• #4AA02C là mã màu của nút home:
• #222 là màu của menu
• #8eda22 là màu của các menu khi dê chuột vào
• Thay dấu thăng màu đỏ (#) thành liên kết tới nhãn, trang hoặc bài viết.
• Thay các chữ Menu từ 1-7 thành tên các nhãn hoặc bài viết tương ứng.

Mẫu 2

<style>
/* liDock CSS */
ul#navlist {
display: inline;
list-style: none;
}

ul#navlist li {
float: left;
width: 60px;
height:24px;
}

ul#navlist li a {
text-decoration: none;
width: 50px;
height:20px;
padding:5px;
font-size:7pt;
font-family:arial;
text-align:center;
line-height:20px;
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
border-right:1px solid #fff;
border-left:1px solid #fff;
background: #003663;
display:block;
color:#fff;
}

ul#navlist li a:hover {
border-top: 5px solid #004a80;
border-bottom: 5px solid #004a80;
background:#004a80;
font-size:9pt;
font-weight:bold;
}
</style>
<ul id="navlist">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>

Lưu ý :





 
Mẫu 3

<style> 
#navcontainer { /* none needed */ } 
ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } 
ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } 
#navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } 
ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } 
#navlist a:hover { color: #fff; background-color: #FE9C54; } 
</style> 
<div id="navcontainer"> 
<ul id="navlist">
<li><a href="#"><span>Link 1</span></a></li> 
<li><a href="#"><span>Link 2</span></a></li> 
<li><a href="#"><span>Link 3</span></a></li> 
<li><a href="#"><span>Link 4</span></a></li> 
<li><a href="#"><span>Link 5</span></a></li> 
<li><a href="#"><span>Link 6</span></a></li> 
<li><a href="#"><span>Link 7</span></a></li> 
</ul> </div>

Mẫu 4

<style> 
#navcontainer { float:left; width:100%; background:#fff; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7; border-top:1px solid #6659A7; } 
ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; }
ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #6659A7; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } 
#navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; }
ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } 
#navlist a:hover { color: #666; background-color: #fff; } 
</style> 
<div id="navcontainer"> 
<ul id="navlist"> 
<li><a href="#"><span>Link 1</span></a></li> 
<li><a href="#"><span>Link 2</span></a></li> 
<li><a href="#"><span>Link 3</span></a></li> 
<li><a href="#"><span>Link 4</span></a></li> 
<li><a href="#"><span>Link 5</span></a></li> 
<li><a href="#"><span>Link 6</span></a></li> 
<li><a href="#"><span>Link 7</span></a></li> 
</ul> </div>

Mẫu 5

<style> #tabs { font: bold 7.5pt Verdana; } 
#navcontainer { float:left; margin: 0; padding: 8px 0px; width:100%; background:#575656; font-size:93%; line-height:normal; } ul
#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul
#navlist li { float: left; font: bold 7.5pt Verdana; line-height: 14px; margin: 0; padding: 5px 0 5px 0; } 
#navlist a, #navlist a:link { margin: 0; padding: 10px; color: #fff; border: 4px solid #575656; text-decoration: none; } 
#navlist a:hover { color: #fff; border: 4px solid #fff; } 
</style> 
<div id="navcontainer"> <ul id="navlist"> 
<li><a href="#"><span>Link 1</span></a></li> 
<li><a href="#"><span>Link 2</span></a></li> 
<li><a href="#"><span>Link 3</span></a></li> 
<li><a href="#"><span>Link 4</span></a></li> 
<li><a href="#"><span>Link 5</span></a></li> 
<li><a href="#"><span>Link 6</span></a></li> 
<li><a href="#"><span>Link 7</span></a></li> 
</ul> </div>

Mẫu 6

<style>  #tabs1 { font: bold 7.5pt Verdana; } #tabs9 img
{ border: none; }  #navcontainer {   margin: 10px 0 0 30px; padding: 0; height: 20px; }  #navcontainer ul {   border: 0; margin: 0; padding: 0; list-style-type:  none; text-align:   center; } #navcontainer ul li { display: block; float:  left;   text-align: center; padding: 0; margin: 0; } #navcontainer ul li a  {   background: #fff; width: 78px; height: 18px; border-top: 1px solid    #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd;    border-right: 1px solid #ddd; padding: 0; margin: 0 0 5px 0; color:    #666; text-decoration: none; display: block; text-align: center; font:    normal 10px/18px verdana; } #navcontainer ul li a:hover { color:    #6659A7; background: #eeeeee; } #navcontainer a:active { background:    #c60; color: #fff; } #navcontainer li#active a { background: #c60;    border: 1px solid #c60; color: #fff; } </style> <div    id="navcontainer"> <ul id="navlist">
<li><a  href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link  2</span></a></li>
<li><a  href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link  4</span></a></li>
<li><a  href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link  6</span></a></li>
<li><a  href="#"><span>Link 7</span></a></li>  </ul> </div>

Mẫu 7

<style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvC_Xa-vHI/AAAAAAAACw0/qVeZI3gdWQM/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"> <ul id="nav"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Mẫu 8

<style>   #tabsI {  float:left; width:100%; background:#EFF4FA; font: bold 7.5pt   Verdana;  line-height:normal; border-bottom:1px solid #DD740B; } #tabsI   ul {  margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li {    display:inline; margin:0; padding:0; } #tabsI a { float:left;    background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/SzvBJiGpo6I/AAAAAAAACwM/9lKuhGGOk3E/s1600/tableftI.png)    no-repeat left top; margin:0; padding:0 0 0 5px;  text-decoration:none;  }  #tabsI a span { float:left; display:block;  background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvBJn6pb9I/AAAAAAAACwQ/XVWOFI_3AgE/s1600/tabrightI.png)    no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /*    Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span    {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; }    #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span {    background-position:100% -42px; } </style> <div   id="tabsI">  <ul>
<li><a href="#"><span>Link  1</span></a></li>
<li><a  href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  3</span></a></li>
<li><a  href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  5</span></a></li>
<li><a  href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  7</span></a></li> </ul> </div>

Mẫu 9

<style> #tabsG { float:left; width:100%; background:#666; font: bold 7.5pt Verdana; line-height:normal; } #tabsG ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsG li { display:inline; margin:0; padding:0; } #tabsG a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvBBuaTrwI/AAAAAAAACv8/G3bPgs-Gu7U/s1600/tableftG.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsG a span { float:left; display:block; background:urlhttp://4.bp.blogspot.com/_7wsQzULWIwo/SzvBB8X5gTI/AAAAAAAACwA/fwleg9upasg/s1600/tabrightG.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsG a span {float:none;} /* End IE5-Mac hack */ #tabsG a:hover span { color:#FFF; } #tabsG a:hover { background-position:0% -42px; } #tabsG a:hover span { background-position:100% -42px; } </style> <div id="tabsG"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Mẫu 10

<style>   #tabsF {  float:left; width:100%; background:#efefef; font: bold 7.5pt   Verdana;  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(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvA5iiWmCI/AAAAAAAACv0/4lAk0jar62Q/s1600/tableftF.png)    no-repeat left top; margin:0; padding:0 0 0 4px;  text-decoration:none;  }  #tabsF a span { float:left; display:block;  background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvA5jIWoBI/AAAAAAAACv4/1TJsSRUoYes/s1600/tabrightF.png)    no-repeat 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> <div   id="tabsF">  <ul>
<li><a href="#"><span>Link  1</span></a></li>
<li><a  href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  3</span></a></li>
<li><a  href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  5</span></a></li>
<li><a  href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  7</span></a></li> </ul> </div>

Mẫu 11

<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Mẫu 12

<style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvA5SCr4aI/AAAAAAAACvs/z9n_NmrOa5s/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvA5lGRr2I/AAAAAAAACvw/691UrUgNOOA/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id="tabsE"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Mẫu 13

<style> #tabsD { float:left; width:100%; background:#FCF3F8; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #F4B7D6; } #tabsD ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsD li { display:inline; margin:0; padding:0; } #tabsD a { float:left; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvAqYEy5NI/AAAAAAAACvk/Upvw2dOoy3c/s1600/tableftD.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsD a span { float:left; display:block; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvAqaCPITI/AAAAAAAACvo/6J1w2JWIlz0/s1600/tabrightD.png) no-repeat right top; padding:5px 15px 4px 6px; color:#C7377D; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsD a span {float:none;} /* End IE5-Mac hack */ #tabsD a:hover span { color:#C7377D; } #tabsD a:hover { background-position:0% -42px; } #tabsD a:hover span { background-position:100% -42px; } </style> <div id="tabsD"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Mẫu 14

<style> #tabs12 img { border: none; } #tabs12 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs12 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs12 li { display:inline; margin:0; padding:0; } #tabs12 a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu_vhXlxhI/AAAAAAAACvE/mtaQIkLuioQ/s1600/tableft12.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs12 a span { float:left; display:block; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu_voDXE9I/AAAAAAAACvI/sVgxX67lkGc/s1600/tabright12.png) no-repeat right top; padding:5px 15px 4px 6px; color:#E4D6CD; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs12 a span {float:none;} /* End IE5-Mac hack */ #tabs12 a:hover span { color:#FFF; } #tabs12 a:hover { background-position:0% -42px; } #tabs12 a:hover span { background-position:100% -42px; } #tabs12 #current a { background-position:0% -42px; } #tabs12 #current a span { background-position:100% -42px; } </style> <div id="tabs12"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Mẫu 15

<style> #tabs11 img { border: none; } #tabs11 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs11 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs11 li { display:inline; margin:0; padding:0; } #tabs11 a { float:left; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu_vcwCwaI/AAAAAAAACu8/HPBTqfggop8/s1600/tableft11.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs11 a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu_vbDU2PI/AAAAAAAACvA/k6O6JwDg614/s1600/tabright11.png) no-repeat right top; padding:5px 15px 4px 6px; color:#9F9584; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs11 a span {float:none;} /* End IE5-Mac hack */ #tabs11 a:hover span { color:#FFF; } #tabs11 a:hover { background-position:0% -42px; } #tabs11 a:hover span { background-position:100% -42px; } #tabs11 #current a { background-position:0% -42px; } #tabs11 #current a span { background-position:100% -42px; } </style> <div id="tabs11"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Mẫu 16

<style>  #tabs10 img { border:   none; } #tabs10 { float:left; width:100%; font:  bold 7.5pt Verdana;   border-bottom:1px solid #2763A5; line-height:normal;  } #tabs10 ul {   margin:0; padding:10px 10px 0 50px; list-style:none; }  #tabs10 li {   display:inline; margin:0; padding:0; } #tabs10 a {  float:left;   background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu_knlQKBI/AAAAAAAACu0/8LiiBZnKfsw/s1600/tableft10.png)    no-repeat left top; margin:0; padding:0 0 0 4px;  text-decoration:none;  }  #tabs10 a span { float:left; display:block;  background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu_k-9mnTI/AAAAAAAACu4/zgN8RBPo47g/s1600/tabright10.png)    no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /*    Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs10 a span    {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; }    #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover  span  {  background-position:100% -42px; } #tabs10 #current a {    background-position:0% -42px; } #tabs10 #current a span {    background-position:100% -42px; } </style> <div id="tabs10">    <ul>
<li><a href="#"><span>Link  1</span></a></li>
<li><a  href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  3</span></a></li>
<li><a  href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  5</span></a></li>
<li><a  href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  7</span></a></li> </ul> </div>

Mẫu 17

<style> #tabs9 img { border: none; } #tabs9 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #F45551; line-height:normal; } #tabs9 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs9 li { display:inline; margin:0; padding:0; } #tabs9 a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu_kvE0faI/AAAAAAAACus/SzckKvt6x20/s1600/tableft9.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs9 a span { float:left; display:block; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu_kr6m1hI/AAAAAAAACuw/YTWQEYce98E/s1600/tabright9.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs9 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs9 a:hover { background-position:0% -42px; } #tabs9 a:hover span { background-position:100% -42px; } #tabs9 #current a { background-position:0% -42px; } #tabs9 #current a span { background-position:100% -42px; } </style> <div id="tabs9"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Mẫu 18

<style> #tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu-pxMSoZI/AAAAAAAACuU/PFY8xbrx6AQ/s1600/tableft6.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs6 a span { float:left; display:block; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu-p0wRo5I/AAAAAAAACuY/T2KFLniEzcM/s1600/tabright6.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; } </style> <div id="tabs6"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Mẫu 19

<style> #tabs8 img { border: none; } #tabs8 { float:left; width:100%; background:#FCF1F6; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #E276A7; } #tabs8 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs8 li { display:inline; margin:0; padding:0; } #tabs8 a { float:left; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu_bd2bmRI/AAAAAAAACuk/Y174Kut0Ngs/s1600/tableft8.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs8 a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu_bixXsgI/AAAAAAAACuo/rQ1FvEtXTdI/s1600/tabright8.png) no-repeat right top; padding:5px 15px 4px 6px; color:#333; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs8 a span {float:none;} /* End IE5-Mac hack */ #tabs8 a:hover span { color:#591333; } #tabs8 a:hover { background-position:0% -42px; } #tabs8 a:hover span { background-position:100% -42px; } #tabs8 #current a { background-position:0% -42px; } #tabs8 #current a span { background-position:100% -42px; } </style> <div id="tabs8"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Mẫu 20

<style> #tabs7 img { border: none; } #tabs7 { float:left; width:100%; background:#D4DAE7; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #333B66; } #tabs7 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs7 li { display:inline; margin:0; padding:0; } #tabs7 a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu_bRCaLKI/AAAAAAAACuc/YEWujpfd-sA/s1600/tableft7.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs7 a span { float:left; display:block; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu_bSCN0jI/AAAAAAAACug/0fWPrwxSe4s/s1600/tabright7.png) no-repeat right top; padding:5px 15px 4px 6px; color:#999; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs7 a span {float:none;} /* End IE5-Mac hack */ #tabs7 a:hover span { color:#ECB546; } #tabs7 a:hover { background-position:0% -42px; } #tabs7 a:hover span { background-position:100% -42px; } #tabs7 #current a { background-position:0% -42px; } #tabs7 #current a span { background-position:100% -42px; } </style> <div id="tabs7"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Mẫu 21

<style> #tabsK { float:left; width:100%; background:#E7E5E2; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #54545C; } #tabsK ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsK li { display:inline; margin:0; padding:0; } #tabsK a { float:left; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvBVzhRH_I/AAAAAAAACwc/wnL2j0dXKHM/s1600/tableftK.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsK a span { float:left; display:block; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvBV1YKHfI/AAAAAAAACwg/3p1hsPWPSHI/s1600/tabrightK.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsK a span {float:none;} /* End IE5-Mac hack */ #tabsK a:hover span { color:#FFF; background-position:100% -42px; } #tabsK a:hover { background-position:0% -42px; } #tabsK a:hover span { background-position:100% -42px; } </style> <div id="tabsK"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Mẫu 22

<style> #tabs4 img { border: none; } #tabs4 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6B78A9; } #tabs4 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs4 li { display:inline; margin:0; padding:0; } #tabs4 a { float:left; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu-gCY1ZzI/AAAAAAAACuE/IYEaj-Ap9Bk/s1600/tableft4.gif) no-repeat left top; margin:0; padding:0 0 0 7px; text-decoration:none; } #tabs4 a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu-gKkyHOI/AAAAAAAACuI/NpLTAFOd2uQ/s1600/tabright4.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#6B78A9; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs4 a span {float:none;} /* End IE5-Mac hack */ #tabs4 a:hover span { color:#6B78A9; } #tabs4 a:hover { background-position:0% -42px; } #tabs4 a:hover span { background-position:100% -42px; } #tabs4 #current a { background-position:0% -42px; } #tabs4 #current a span { background-position:100% -42px; } </style> <div id="tabs4"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Mẫu 23

<style> #tabs3 img { border: none; } #tabs3 { float:left; width:100%; background:#E4E6EB; font: bold 7.5pt Verdana; line-height:normal; } #tabs3 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs3 li { display:inline; margin:0; padding:0; } #tabs3 a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu-fxTO5uI/AAAAAAAACt8/-Obicf3fMP0/s1600/tableft3.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs3 a span { float:left; display:block; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu-gDciBuI/AAAAAAAACuA/CQSbr-4_cGU/s1600/tabright3.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs3 a span {float:none;} /* End IE5-Mac hack */ #tabs3 a:hover span { color:#FFF; } #tabs3 a:hover { background-position:0% -42px; } #tabs3 a:hover span { background-position:100% -42px; } #tabs3 #current a { background-position:0% -42px; } #tabs3 #current a span { background-position:100% -42px; } </style> <div id="tabs3"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Mẫu 24

<style> #tabs2 img { border: none; } #tabs2 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #84776B; } #tabs2 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs2 li { display:inline; margin:0; padding:0; } #tabs2 a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu9PRHHGvI/AAAAAAAACt0/VowUBlNOh9g/s1600/tableft2.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs2 a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu9Pg-t39I/AAAAAAAACt4/Bc82ooHNWSA/s1600/tabright2.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#84776B; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs2 a span {float:none;} /* End IE5-Mac hack */ #tabs2 a:hover span { color:#74675B; } #tabs2 a:hover { background-position:0% -42px; } #tabs2 a:hover span { background-position:100% -42px; } #tabs2 #current a { background-position:0% -42px; } #tabs2 #current a span { background-position:100% -42px; } </style> <div id="tabs2"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Mẫu 25

<style> .container { width: 500px; padding: 15px; margin: 3px 0 20px 0; border: 1px solid #ccc; background: #fff; } /* square */ #navSquare { margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #9FB1BC; } #navSquare li { margin: 0; padding: 0; display: inline; list-style-type: none; } #navSquare a:link, #navSquare a:visited { float: left; font-size: 12px; line-height: 14px; font-weight: bold; padding: 0 12px 6px 12px; text-decoration: none; color: #708491; } #navSquare a:link.active, #navSquare a:visited.active, #navSquare a:hover { color: #000; background: url(file://localhost/C:/Program%20Files/CSS%20Tab%20Designer%202/styles/Square/Square.gif) no-repeat bottom center; } </style> <div class="container"> <ul id="navSquare"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Mẫu 26

<style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Mẫu 27

<style> #tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvBBx63ZtI/AAAAAAAACwE/lOu0RDcHs_c/s1600/tableftH.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left; display:block; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvBB9V8tWI/AAAAAAAACwI/rmnQz1WjK-g/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; } </style> <div id="tabsH"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Mẫu 28

<style> #tabs1 img { border: none; } #tabs1 { float:left; width:100%; background:#F4F7FB; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs1 li { display:inline; margin:0; padding:0; } #tabs1 a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu9PCVjbFI/AAAAAAAACts/MclSzL8Aza4/s1600/tableft1.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs1 a span { float:left; display:block; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu9Pd4oqxI/AAAAAAAACtw/3ldOBb2QV-g/s1600/tabright1.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#627EB7; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs1 a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7; } #tabs1 a:hover { background-position:0% -42px; } #tabs1 a:hover span { background-position:100% -42px; } #tabs1 #current a { background-position:0% -42px; } #tabs1 #current a span { background-position:100% -42px; } </style> <div id="tabs1"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Mẫu 29

<style> #tabs { float:left; width:100%; background:#BBD9EE; font: bold 7.5pt Verdana; 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(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvASky0MXI/AAAAAAAACvM/lCN12ooOQ_o/s1600/tableft.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs a span { float:left; display:block; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvASjsu31I/AAAAAAAACvQ/h_VW2YzIljU/s1600/tabright.png) 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; } </style> <div id="tabs"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Mẫu 30

<style> #tabs5 img { border: none; } #tabs5 { float:left; width:100%; background:#E3ECF3; font: bold 7.5pt Verdana; line-height:normal; } #tabs5 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs5 li { display:inline; margin:0; padding:0; } #tabs5 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFkcXM2JNIjoZqa3ndhIfwtPRS3K2n8MsOUEsiGL6aJkJERFYO2L8otFBlcpITSNa_kA8UBo6yfW_8yi4YowXzpm8FMecQJuQC_gE8GMhltOB8V_ecPVQnrQEMoWMGJDCOwTgyHvWmsDNH/s1600/tableft5-namkna-ngoctra.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs5 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNX2Nsprl7rm1zQNJUdIvYWDrbMBpi4Ubvp7E5hEvstnFhAi6VlNEobTkphoL-cITf5QlNNFmqYDNHiSU3jSMRg48ukh1GN5rfFIwKoHR50P0Q-_lLKGCgQRxcqZYf0KRF0Xs45qCV2jI5/s1600/tabright5-namkna-ngoctra.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs5 a span {float:none;} /* End IE5-Mac hack */ #tabs5 a:hover span { color:#FFF; } #tabs5 a:hover { background-position:0% -42px; } #tabs5 a:hover span { background-position:100% -42px; } #tabs5 #current a { background-position:0% -42px; } #tabs5 #current a span { background-position:100% -42px; } </style> <div id="tabs5"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Mẫu 31

<style> #tabsB { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; } #tabsB ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsB li { display:inline; margin:0; padding:0; } #tabsB a { float:left; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/SzvASpRftuI/AAAAAAAACvU/Zu86nlwjvhQ/s1600/tableftB.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsB a span { float:left; display:block; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/SzvAS5-xgjI/AAAAAAAACvY/f0YjqMbxzqY/s1600/tabrightB.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsB a span {float:none;} /* End IE5-Mac hack */ #tabsB a:hover span { color:#000; } #tabsB a:hover { background-position:0% -42px; } #tabsB a:hover span { background-position:100% -42px; } </style> <div id="tabsB"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Mẫu 32

<style> #tabsJ { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvBJ_dMfYI/AAAAAAAACwU/ROgYM1pOzzo/s1600/tableftJ.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsJ a span { float:left; display:block; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvBJ7Gdz_I/AAAAAAAACwY/o6Vlnp00pyk/s1600/tabrightJ.png) no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsJ a span {float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; } #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span { background-position:100% -42px; } </style> <div id="tabsJ"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

<style>
#navcontainer { /* none  needed */ } 
ul#navlist { margin: 0; padding: 
0; list-style-type: none;  white-space: nowrap; } 
ul#navlist li { float:left; font-family:  verdana, arial, sans-serif; font-size: 9px; 
font-weight: bold; margin:  0; padding: 5px 0 4px 0; background-color: #3535c7;border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } 
#navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px;  
color: #ff0000; border-right: 1px solid #d1e3db; text-decoration: none; } 
ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } 
#navlist a:hover { color: #0000ff; background-color: #1e5508; } </style> <div id="navcontainer"> <ul id="navlist">
<li><a href="http://namkna.blogspot.com/"><span>TRANG CH?</span></a></li>
 <li><a href="Link liên k?t t?i bài vi?t ho?c Laber c?a b?n"><span>GI?I ÐÁP</span></a></li>
 <li><a href="Link liên k?t t?i bài vi?t ho?c Laber c?a b?n"><span>DOWNLOAD</span></a></li>
 <li><a href="Link liên k?t t?i bài vi?t ho?c Laber c?a b?n"><span>PHOTOSHOP</span></a></li>
 <li><a href="Link liên k?t t?i bài vi?t ho?c Laber c?a b?n"><span>CÀI Ð?T WIN-GHOST</span></a></li>
<li><a href="Link liên k?t t?i bài vi?t ho?c Laber c?a b?n"><span>VUI Ð? H?C</span></a></li>
 <li><a href="Link liên k?t t?i bài vi?t ho?c Laber c?a b?n"><span>WEB HAY</span></a></li>
<li><a href="Link liên k?t t?i bài vi?t ho?c Laber c?a b?n"><span>NAMKNA</span></a></li ></ul> </div>