▀▄▀▄▀▄▀▄▀▄▀▄ Các bài đăng mới ▀▄▀▄▀▄▀▄▀▄▀
    Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv5 Kenh HTV2 Kenh SCTV16




Xem truyền hình trực tuyến (Click here)

CÁC MẪU MENU NGANG

Trước đây, tôi có hướng dẫn tạo menu ngang cho Blogger (xem TẠI ĐÂY), nay có các mẫu mới các bạn xem nếu thấy thích thì chép code dán vào blog theo như bài tạo menu ngang cho Blogger
Bạn rê chuột vào ảnh để xem ảnh với kích thước lớn hơn

* Menu 1:




<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>

*Menu 2:


<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>

* Menu 3:


<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>
* Menu 4:


<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>
* Menu 5:




<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh247COE-CiY9tgLDWvzqqCIY1GJK0YFsn8ZvjU85JFnCP2QidOQMQj6z26U4B3DOYK6QeBFVT6CtQu9krNHGXdtOm1fs82dSrvhjLeTHqluxZlscFwQz3VbDiyOoJeY84LHPxuUAnsSGU/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>
* Menu 6:




<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUNOaT2yTjhhErTtu8OJuVHsyawJhOAM1nRSbU7fmuJ2qxLtPlwRVhXz-DJRcD-x3v7aAgBCje9XD7ezaSMklD6YlOanmShp38tOTa6nzBJTRHFE23UM80dog3ZRwgveRYj9h6jNMMxWw/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKbFp6PV8f0o4zonGJPGW-iwCDCDsFTrm0xfCghXobzHYPRCutNsgPn78ZnYDKJP9SBing_KVsLy-K6SNdYO27_7o5e7nN_bIFBL4atnEMo_aFcSLGiBlDPT1i-DvXFlKGkOexanq_AVI/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>
* Menu 7:




<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhls5re43FML10nUQ9axOB2I-YpOsibCbJsYzDk5zQPEkXEEh1rUjgXZz10syKmVUImp6Sm578appfQTLLmZLt2Ch0SzIoYArpKtWyst0sHFnEKLXwItoCXbQkuJ6RQT9z2rDcLY2YOj-k/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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNVQG-5GE0o0RJQMz_t4dRLQqMWe9BKbhgBKmkP7LROmdQLFQ-5X-mz3RoFZO44u59Ky74FPEmy04D_vZbmTO3VbfRSS1dCPlVFkw4ZTqolXk5Zp8xKHTuVLTeL0qpKSJjwXIwrRz43Hg/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>
*
Menu 8:




<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5epEgil9fjHg9s75XhOoMqhsqxW-M5i-JAZQM6rIf3RBmBFMPrml1h2GfEk06VZDJ_NZN4mecaw9maa8gLHFQMN_IJp7LOiNMArh_FivvPBk5eGAO1IoRu-noZwCKfW7dMc-GzKkoNU8/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6YtIF7UbZtDV1tmHEfXL7H40WWu4tcE9ILm-WrhFO-vWjxlPXQEQrj3a8MLPa45rEkcmTZiLIerblM07AcFV6jEGseD9xx7W0jxX2wZf7ufaqia_f-wddOwNA-xnTX9G4XjIynQpa7IQ/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>
* Menu 9:




<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>
* Menu 10:




<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjppfaEoj4lHZUQKibwketrIKh7AxqI7vaV7TYlZKUQsh5x_iX99edVPgnA3dBfSNuu44zacr8DyGj8_vhyphenhyphenJfGRE1pzRdhsXcdZhBa34cvu8lad_SjDiuuJ-yyygfzhyyE7EaGo4ZdF414/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilZbQBDO2RIPuEjsEg5p38Xkyk75AD7iQ2uD58l_wHhmd5WcHOV8ZmIpMoSvx9EObr2wmKCIhbNhYlTO4Gbff8AmOt9CLIbmbO2VHvopbtDWlkZGexIwAEfBIFyE6zgodHrP0R5aK11Q4/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>
* Menu 11:




<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh04zyOzt4Cg6GPFZH9SwdWXcX0tno1cqWLtLWvwlhSMFAGA0C0_o1yTA4rM7MJZAe-okJwF3qjbA0-anZfuvhstS3bZlxZHLO6wcQeWEcbbUfdIvIOzC79ruw2HwSm2d7__9mHcpgDIYY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibxJXW2NqjXwDIlD3E3TtPonBQ4ODlFNn5lxf4a21KQfebLcTfM8lvRQzENyAhRERSkdxnEwhNuU4jH6ZEhzv6oWy57rw-J8GnPqBKLKBYZK6uCBve_6qgAq_-QOQEnSBmRy8Sqe02qhA/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>
*Menu 12:




<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHRRKogcaIi7FAAEa6fBJ0qonX53ZFqVT-2XNM3PzNjbaOyfDUKh9vpI6ousa9g_Tj5tXrlWD8QvXyeoBTJqD9HdWMqyZZ0Z_HSK-fg6uMy5SBgUqT1UeZm2oMGe1EZyS8q96ApUhRgIY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUDZOVNpG5L8SaxaZdaN2OJtR-eLHdr9Of7Lx1gDItTsJusdkssRjq2Q_NQux9RDPmmjJAJ-hl0kr5rljnUf-9jsiHSRaOmeM4ZJDhdnyLalk77IZPxIZ8dFvWJeDrDLBgUG39hwJSURY/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>
* Menu 13:




<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnwGJBb7CwIBDyHe5RIZciX6EJIOShoA3mQl8bUlp_MEMucXJcM2_jXT7IPaEHZZdX4N04uhZcFXDk5GJYcMGViV9goP2cCVvjngJzuOeyfLygz40quW1-tJZgnqjeZGmRy7hBHydI5NE/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHd8VYnp121JF-sykqt03OgqmFIwPJiRxevg8zpaL5vKDk6NjWCGViyInTGcsMkCheSPGY4LskT-0lGOH5uwPuI-eFMwqQs5Us60lTjUbnp62enEZHgt77aWVhm734IYte38OB3EYKC5I/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> 

* Menu 14:


<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBWn-3IAmdRIlKdBTzGALoJlbVhVcgOnM4ea2z_SevXyN1qS5mYyBaKm2PvZ23g1LFOJChaEnZRLBRab9nvwicisz_IxvbmzJOMQ4HundTj1wQ89eifhMSDg3EewMEqxIX17-AWXDUiIw/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCwDZJsdD9UO9zBRHwe2CrZ_jTr3JgL24oOE9Yi3zPZSDrqz1OH9ly9MuFhWwED3vFXMI686zvw_Cs0XRQngQkKjcy4vtYZGtB4htRP_9CALedXJv9FeYiVAv2JGpuExVkPTjVcHlY4OQ/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>

* Menu 15:


<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNSa86YrwHxGaOjAI8gawc-NscTyqnqZ4hj4a_hF5SRvUzUn8_ET0czjy5K1jgG2sdpn-V4NAM69DylIjcyMkE5ywRkM1n2_QxlfgjSWfGVYVRxq_kjKOONKj8I7gT4jqsjHnYcNcd1G0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIX8s8Y8x2w39fntXJkSO8IVVBlb7bj2R3LX8OIA9-rmxIACNTmu42EVEeEVTgUo_bwS6CaB-5nbsGguj-3fLA7KsVHe7Vasx-SUKNSrjUzufhzvWFtwz1bTmHfsbP-BX9Q20RQRHekAA/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>
* Menu 16:




<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg62HN8H6RHUlI8UM-7BJdjfb0s6URdZlkxJvEHpWkTm_ee0TjqBYCPFums-GP4xSw4hWa8qqJEaVqyI2Yw91GUvQtLn1LxINoTduPNzJw1mRbK00LARqhVYvLrin8kNKlzorukRdO1p7Q/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiuKq1FEwCUxnsdUBdRRxq_cvRXUznT0PnOh5_ETX3BzcVttFKtBWkEniwKfq3DLV-RZ7kQ5G18NGxPxcqHNX_0LYZPI3bm0pmshk6nsIVgD5jVgghs7w2xL8sT-CB8iSA7vHy44IFX7Q/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>
*
Menu 17:




<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNdN-bv4YQWhAegUmXFMwfFMPDXxLzx2KQng67kiMIpYd87SIuGNf5Ix12_rjfsgoELyvHubdhP_LcR9puihQjBMlaYX2VJvnni-_gVKrFw9F3LmM2H9JTKlN-ws4dLtuTZTi0c6ZfhrU/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjUyiVV2tmBzWldhYZK24MEhUbf2Hz0NVY3uPgymhBg86kOq-k2EdJGMloGAKA2AY7b3fS23bH-hr5fuARm7LU2hxIdtPZFX0BMux7nNFnA3Gz0WHUr25vvsyQngwsHWYdzrH27XA-SWg/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>
*
Menu 18:






<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmgw2Olh4ATFffqs1XFJR7Ob-x6NIS2Tc-9NFRAHnetlwsKCZh3pbHYa-jYUmVVLHf2hn_veArj76uM2KELtrW-HUbHUnwfPE8jdTl9owEBh71UKObLFO3ahILVsTleZUjSMqC7DXR1Qk/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuDd7mUKgKq0GWRYzsKOFiYmFb6lMfYJJYXq6_dlVdW1Sc4vrxdjD5BClnJtWRhVh1jzRPPW4B12ViJYkNF0AvVlIiM02tu6mxaCWty1Z4Dztj4uQAzWR03WjgtSmf7js5GhZVrRA28mU/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>
* Menu 19:






<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4bX4pkrxSfu8AJvMC45hFC7Bj3xvP-ckmC38ZIi9GS5DVipI0n169oAqigpRMcGbm4P1hpM-xb7C_0LLZOcoo1bd0hWvy1Kl9-GeLX5L9t9ZsTK8Dug6ObGRZSebmW7XWdGhu7iZvE9Y/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjumB36hUWCT6TriWBl6nI4aAfh_LYvIH1IEKWY_1f11rTD_zSCCLopqPcWXYorivTsNDN6QZRLxiUOhVnLRmw4jtZZcLyXBOsziWrk_YDp6ZhiXRD_4fr3GEnrQXgRIZKjYQ2q4FuoaTw/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>
* Menu 20:




<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpP2W5Zb7wwU_7LeNaHkSsNkAwJQcFLBNBGWqMaRnJ3H3ImVZotPc_zPKsEzmXKrjb1EeIfu_Mh9Bx3mB1uddqa6r-Iw6l8IQkvK149z496YkGq1v-r_WDFfGxuBTG-BGVTdBgpFhWgPA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghs45wbLucqTlj0e5fJPGtgpWZc5Kh_FD2Kwp6sTmnwswxB95QuyYPebEQjhOmPS0kg8r-bpjXIeUN-e6hvuBGC_9SX2kpCwv6_A82zsecGlkSBbiujd6kelIij6ztxP9-Ihyphenhypheno8Oma5ME/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>
* Menu 21:




<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRIkUc-K6NTVYvA5XRTuqoLBkqwvYcIQt-oIHytv0zey23E89OS6cSynNK7MQPgN3hhTmA04RcI-NE8AzlKYrq-3ZhPWVamXZs-ytxP4y8JnyAhRfuv89uwXDt0nyJMsWkOjtEWnxVjJc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVTtVEHm9xWMlr1mVXmMQeQX9lBksBDHkcnfmRXQGBq313b-WpMUvYiYh4JWPLB-bV23QM2es3cS1JQBPtU1jf7WEtV-Q6IVadXt0BxC80pL7GpHHBH3snBYj5_dZYBojMAV26eSsKBig/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>
* Menu 22:




<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKvpHDpDbhgtF2kYQhJkJPCms8TXuqd5DiG52Q4x5PiKIFRxYYCg3ZGs8w7seCm13UoIrSlPfs1lFARghLgVGT3UIiKKwcVA2HO2bN0likmbI7uYkLT8e1sPphx8K6mYqdf7PPxx9R8b0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYBjz5WYyKN97_IFmKeMIHb_40UEz-c63EkKgrZuW5vY16U9BcS6mAvb_s4ICrh2KgrOZHOPoU1XQUKkyhwkk2B4yxKGfzitbUCv8_gClV0qhs-QTecqyKmUYjp5kQ12r5rh_dvn7SY3o/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>
* Menu 23:


<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>
* Menu 24:




<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>
* Menu 25:




<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyqKWyTshbVnHYXxL3pnNXVx6i-Bo9pOqS8NlMRfY1LeWouSQPsqu2PsAzos0SVXnAPwaE1fmVFjUo_h2rPfX1xcnLNQcQCuUzRtLri4etDyrFFnzP-xmC7AC1fzIbgU2utW9ruM31Jq0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilV0v7Vw50OLwLqD2cNzNfCdiJ3spnk3im2SVxpsFNoMabB5bOFm2iGOAktFyGru7u_Yo1QuNQ2xyW6HuIUP2zN431sF2iPPEzNR8Pzoq8Hlxl1Rv2aJ6vgSijPsFgi794jrYvg5A_1Oc/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>
* Menu 26:




<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizfo8uS5mvG0Ms2Qa36OqFZStCmm4320mpl_vcfHQ0fQBOpCXAA2TFZJnfRn8wN2_wksI5Vdlh3ve7q8dMn9TY2610ReqxKJNsyUTKJHXqaXhZXkKIoIsptdij1l1m-sHNws_VNKIAqLg/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhniomgy8XoPrwWZ4PActrTx-Uvlobkimsk8ftCS4ZWOl0jSw9LoQKwsUJkIkl4Yw46xUEDgNtm_3vdHb9rlZ_9yvCL_RtPCgyAYPgQ9Zj9hLdGIsUXOOZZWzaJ8dXImYU3FAUP1A6QKiQ/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>
* Menu 27:




<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGP9u5WgGvBD-3r-qtW5EoE_bus5RO-0kjgax1-fOWUcEmlRGh1FaytCRu-FLmumSPo84lshyphenhyphene2zeH11axHlSyKE-9t8AbaFMdm8i2RNlHAlfnFEAbJ_5X7yedqnD0PsbFvGCIcELVCWo/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7V3X9NNoR9fmAIWu8B6x8hEGfGBD408Gz5lpSTofEfMVnCLmGdule_zL5VUyjQgqqj9uC6EjrrOfkUcPzQRuoY9AQue6UMBRgF52uzSmKtA7a7-XCWCova3rha3G0AL8i3pLNTDihjq8/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>
* Menu 28:




<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/AVvXsEh1aSauSlypVoTmP07EfTq3elyfWqIjFshley4cYeRPDEzcT54Go5rvcyhzWz2cQMp0rbfRpG5tIq0alsOVXc8P2En8h0aIgJpEFMyLyFxm534qHvTT2RNmU8d5L34nhQDoDaapfpI5b9A/s1600/tableft5.gif) 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/AVvXsEgWmho76i2LGpTCgGX8NgqUq4vXCcet8E_Q3QQP1mkBhJUcJMcoklHrIBUc_qorhPf8AbZKrD1XoaAqhYr25EFCpRiGIsqsqkhIWFylhiOimL6Td3aRf5uVsVUMjEA-M11EyVfgUThTww4/s1600/tabright5.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>
* Menu 29:




<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLJ4XRURB59zsAVQ6yCZLSKVx_UKFDby3L_Cq0vkBuOmOrDBMk_AJe-qdM-HeDVoFxCmFNxUU2kzdziZ8KvEGH9IuTv07H53vDIt9vVaZle69j8ZbSEDGfMr6aTo0s8j1dF62NWAkmHp4/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPoE7I1Qtcy09IjR4CMXFVTJjgcT22sd6JfEZgvWRgXxAwF6LModXPgkTcnM8VwAPqot39NyZvCyp3z1dxo1x04LQEFvRdrNwVS-sDZmaAUiDKzU6USCzzc6KAa9qYZALUwuPm6yNCeTI/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>
* Menu 30:




<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr3gsg-RrlL7xPB4sHMQ1cE-Vx6Ql81jk0FxSnp4NXkjg4nzRnZcX9nvP74LBjyQWQb_NqBqDvhH_B97MQsAzjV_PmDAgQgYjJHYMUm_KKBwT5lQc6Sg6Jltc-qkPX3yK3x4aBb8xxFh4/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRWAGdxCpiJ2f6Zc7dw7szWlkY8VGQqSdRYJ3S1skbM0x52nqYmbq4NcHHBdlPrAHYX3UHY7tJGOT87JknMWTLQdIgckAVxKDi30uUN6qfajcEpVow1mSz5Sx5O0hYnHP046Gc1vmKSac/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>
Người đăng: dunghennessy vào lúc 13:20 Nhãn: ,

17 nhận xét:

kimduccz nói...

Mẫu Menu ngang trong Blog em đã chỉnh theo lời anh hướng dẫn được rồi anh ạ.
Còn Google Chrome không phải phiên bản hay trình duyệt bị lỗi (vì em gỡ bản cũ, cài lại bản mới nhưng vẫn không cải thiện được tình hình)
Hay do em bấm nhầm vào nút ẩn, anh biết bấm nút hiện ở đâu thì chỉ cho em biết nhé
Cám ơn anh nhiều

lúc 16:27 19 tháng 5, 2011
Namkna nói...

Thành thật xin lỗi, đấy cũng là sơ xuất của mình, mình cũng ghi nhưng có một số cài mình quyên không ghi, nhưng đó cũng là số ít, mình xẽ khắc phục ngay, rất vui vì quyen với bạn :))

lúc 20:59 20 tháng 5, 2011
dunghennessy nói...

Mình cũng hân hạnh được làm quen với bạn.
Chúc bạn vui!!!

lúc 21:26 20 tháng 5, 2011
Nguyễn Quốc Cường nói...

anh Dung cho e hoi de keo cho cac muc trong thanh menu ngang dai ra thi lam sao.tai so muc cue e it nhung e mun no bang voi thanh tieu de ah.thank a trc nha.e sd mau so 26

lúc 10:51 24 tháng 7, 2011
dunghennessy nói...

Em kiếm đoạn code này no-repeat right top; padding:5px 15px 4px 6px; color:#627EB7; và chỉnh lại thông số từ 15px sang số lớn hơn

lúc 16:27 24 tháng 7, 2011
Nặc danh nói...

thanks so much !

lúc 16:56 8 tháng 11, 2011
PhạmĐứcLink nói...

ths bạn nh :)

lúc 15:33 22 tháng 3, 2012
dunghennessy nói...

Cám ơn bạn đã ghé tham quan và ủng hộ dunghennessy

lúc 15:50 22 tháng 3, 2012
Unknown nói...

Đọc khá nhiều bài trong nầy thấy mình như giữa mênh mong em oi.
giới thiệu cho chị một ngu7o2i thiết kế luon cho chắc ăn hiii.

lúc 22:05 18 tháng 4, 2012
dunghennessy nói...

Tôi có thể tạo cho bạn một cái, gởi yêu cầu qua dungheineken@gmail.com

lúc 22:07 18 tháng 4, 2012
Unknown nói...

Cảm ơn người viết bài,mình xin bộ code mẫu 25 về bỏ bớt cái nền đen trông thon gọn nhẹ nhàng hơn chút,mẫu ấy của bạn đơn giản mà đẹp lắm.Nhửng cho mình hỏi thêm tí,mỗi menu vậy chì dùng được cho một Link thôi hay sao có cách nào để chúng sổ xuống mà thấy được nhiều Link hơn được không?Mình là người mới vẫn chưa hiểu cách nào mà bạn tạo ra được riêng từng phần?tức là nhạc riêng,hình ảnh riêng một Link mà trong đó lại có rất nhiều chủ đề? Mong bạn chỉ dẫn thêm.Một lần nữa xin cảm ơn.

lúc 01:11 28 tháng 10, 2012
Mr. Xeko nói...

Chào bạn Dũng
Mình đang áp dụng một mẫu menu ngang của bạn,
Có chỗ này mình muốn chỉnh thêm mà không biết làm sao, nhờ bạn giúp nhé,
Trên thanh menu nganh có khoảng 5 thư mục, mình muốn cố định chiều rộng của mỗi mục (bằng nhau) cho cân đối, không biết cần chèn thêm dòng code hay chỉnh đoạn nào, giúp mình nhé, thanks bạn trước.

lúc 09:33 31 tháng 10, 2012
dunghennessy nói...

Đây là các mẫu menu ngang đơn giản vì vậy muốn chỉnh độ rộng của các Tab bạn chỉnh các font chữ lớn hơn ở dòng lệnh Font:... hoặc chỉnh độ rộng của menu ở dòng lệnh Width, vì mỗi mẫu sẽ có code khác nhau nhưng vì bạn không nói cụ thể mẫu nào nên mình hướng dẫn áp dụng chung cho các mẫu menu này (có một số mẫu bạn chỉ cần chỉnh font lớn hơn hoặc một số mẫu bạn phải chỉnh độ rộng Width)

lúc 14:08 31 tháng 10, 2012
Mr. Xeko nói...

Cảm ơn bạn đã reply khá nhanh.
Mình đang dùng Mẫu 11, mình cũng có 1 số tùy chỉnh trên đó. Trong toàn đoạn code chỉ có 1 chỗ có chỉnh độ rộng (width) nhưng không phải cái mình cần. http://tradethisway.blogspot.com Link blos của mình, bạn coi qua nhé, mình muốn các mục Home, Vn-Stock,... có độ rộng cố định và bằng nhau cho cân.
Cảm ơn vì sự nhiệt tình của bạn.
Định gởi bạn code, nhưng mình thể paste ở đây, hic hic

lúc 15:47 31 tháng 10, 2012
dunghennessy nói...

Bây giờ thì mình mới hiểu câu hỏi của bạn và cũng thành thật xin lỗi bạn các menu ngang không thể chỉnh được độ rộng các tab, các tab lớn hay nhỏ đều tuỳ thuộc vào các chữ hiển thị trên tab mà thôi (chữ nhiều thì tab lớn và ngược lại).
Thành thật xin lỗi bạn vì sự bất tiện của thủ thuật này

lúc 06:10 1 tháng 11, 2012
Mr. Xeko nói...

Ah, ra thế.
Ok, thanks bạn nhiều.
Khi nào có khó khăn j, mình lại nhờ bạn giúp đỡ tiếp nhé.. Have nice day

lúc 08:54 1 tháng 11, 2012
dunghennessy nói...

Ok, rất sẳn lòng.
Mình cũng cám ơn bạn đã ghé tham quan và ủng hộ dunghennessy trong thời gian vừa qua

lúc 09:58 1 tháng 11, 2012

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)
 
Powered by by: Blogger