TẠO MỘT SỐ MẪU MENU NGANG CHO BLOGGER( PHẦN 2 )

Chào các bạn !
Hôm nay mình xin giới thiệu cùng các bạn một số mẫu menu ngang cho blogger ( Phần 2 ) . Hi vọng với các mẫu này sẽ làm cho blog của bạn trông đẹp và pro hơn.

1. Menu 1:
<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>
2. Menu 2:

<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/AVvXsEhMocmK65xefPDiCt-Lgr8v-PjvcjaCKiKrFBKRsSEl-wLNiB03nHHpIzhYmdL6x0zdDPgcpBLn3s0RFHL7VcPCCYlGF7NcjPElEwqedb7b4R4FWwNnVhLvMG2v3QS0jhVHyvajrSXiPvs/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/AVvXsEjB8wS_jIoHTsZSGXTJYHPzfLP0VgLWXI5HctYukUBnok8zBsnP4MZHF0J9URSLg3XeXvqYpC8UmWcUhz0vGhdjhDPoHBZIZhK_xwNBt8SBV-ufH09PIzqsczpHNCYkGqXTojPXJQYbs7k/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>
3. Menu 3:
<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/AVvXsEiTEqNstkRSu1OMKnCy_dfKPV2kETiCZd2bLMPaJ-3UFp4isQj1QCFwUOeUnLKzgn8JOb32gcn5OIZIsvKBhMvyLPFjYD9Cov-hVmNHkkEtrgXHGpuMIqy1ttAg9Ifkqm2hSoRUY2vY3r4/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/AVvXsEiW0guyY-yrX7iK8NcoL8jPuwWserSp9lPQI0HFVZ2raGpyUJb7aehxjzXGxiY10XhZcBxHpvVY1v0gF9sx-VBI9LoaAd9m3PQNPm0W6rYjLXq2fS5OzB11mqNe8v23YXzRERmJvhUsDYo/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>
4. Menu 4:

<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/AVvXsEjtooGeaGejrcSLk01AYvw5gu42KEuZhlFnL_R55oMbAStbyuRE6ru1IS43iMXijnBpdL4i5b7pz60YWVQ4dBN3CZyKhSA4Kz4h0LNcC7_a8xWlNH5Dcd1zsaiAIa-DiYRYxHf6wRTLB_0/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/AVvXsEjV3glkhY90f0kybuR5ECE10M58qcEfaAWWzzkY5s_9De6dvqoW8Hsv_RYNRMMjBRDn8ssfD329q69z8TYODr6_reRj7OvY7JXVzzbwZnHbowLUEh4KBLKXxed2U_QUNQwy-YTRGKLvbrM/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>
5. Menu 5:

<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/AVvXsEhzCsTmSt4LACsNWSK8EiFtH1inN-50l8CPIV1u8ec9-Z0_6l7dNUgN6C2qTeEkwy4aedy_WQM0ps8RXmHlqBhjRuP60En7-m4z32bEc7CfGJ8EI53HU5q2URpXNhGpEK9qTG2OtmXpgmA/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/AVvXsEjnhZXiLwcG_D3mgludi6EBZosqdlG5XnxGlhFjo9ufj_tqPfmq-Bpx3YyYps6B-zq_e6jkoKRfwyXiz7aHmxEsXGD3tQTRLdtHTiVseJVD9_cRllDgTzXBBHkEYGQj7ezdU_xUKOoZJmk/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> 



6. Menu 6:

<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/AVvXsEjLAawU-QxxfCJy2QTyqG7vsYLQ0x5PZNE6rHVjV-SNeefZXRGJVdXv1iy2rqLm0Sif5hGdOBJ27wdHwHlaObtrj0VIFmI7yi_H2Rb1ec8rYCKUebVEdQe-5ntsSLX9lh5v9af_zG-M0mA/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/AVvXsEgoWi2NbdXZRklJnL-mqAxyx7xH_iwE-cRpN-gt-zSWZe5HrCREQpRqoSKz8f5KUuIcQVnrGzXXHg__5IrMeQ_Ghyphenhyphen3xOssA_KSmH3TpdZbAuH6Mm_7vIbfvg9Vv_KDhZZS3NK2SkSHMoTQ/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>

7. Menu 7:

<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/AVvXsEh55dCKYSpvr3mQt-MGVELZ-1ufN4pagjP34AOYfuLUsViPlrfYz-XK8xXTYaVRWZhiBcbpsAvJZy2_4urFbtVC6ZgMXkKxbr6_al46UAxUJCZCuj1tR5j7-N71cjli7Flzzq9L2KTugYk/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/AVvXsEhmnfJ_4v_zq8gTbWBf4vGHn7atPWDdVeSBbCn5mNQh2ryGGamJtbP5TtccVe2IGoQZudlk_fpUa8b8m3ojdIcNQHDZCJjV-AhKpiLLaxdhSHaZ4P7HujqHi9EO6uPCJn1DiDgi35-BC_Y/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>
8. Menu 8:

<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/AVvXsEgvYthTvcjOB-a3IntdChTPhW-grznppL3I6NhHS-tiDED3yrm-RuJvqCA66Uf0ZYBpKqcgo6KFYjtApVeZSPzs5cNurl3eZs5uzzia_b-V2YaRyC_ijvQWbpBP61de38IrD_vsMbKTKus/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/AVvXsEiyUF5dUxXZ5gpCOjsvn9YSS4HJ7nOqAPjws4odWrrSoKFcox52IVzq5_G7TdspuEl1DFD-hiImnS4K6IEw22-iMPfzmW74WdKGUF5JKt2yDnm7pseU1RJ3GOwf-SVSWJk-25GHLYsuxi8/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>
9. Menu 9:

<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/AVvXsEg9ZcjaJsIG7jYqRb-UMh7X5K7InxK_jfZ1Ms_ZKLh7_ZnCAj8qNaXAfvE5oxSxK1UNkpqDZ9CIkc6mAXzPC4qAwhrXz0a1qS-iA5ZgRnip7ZVXTSBbpPe2paCQh64M2L1WnBhyphenhyphenYI0T7tk/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/AVvXsEjFMzxJOdroLPCr1FdtV47o_TY8RIO6Kh5NF1_N6-yRIxPMFr2_LJmmRxqoLL5ljKiK-R2_m1rlMN2BADqAIs4zeLrlaT2SwOjmNX9o7I0ldCLnLEUkfkrjPAlM6VtnpAlwG4GCQrk7ELc/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>
10. Menu 10:

<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/AVvXsEhGEK49ZxDU0nCGruXzYDFkrhkf5RPuaDv9aVG3OteYmsauq97LVxy7j1bw-PASXaqEXhlT6MgB8KoMxjLO6aMaf-OkFEGzDWcAC_FqzrhPbSBudPGwYjUKFTmKzSJM8kgzTV6jqkCx0YQ/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/AVvXsEisbfk409Pi4kB4Dwl_R4iBJTj-ggQBQhk3wM6zMoZS2Dl55gBgTxV3dB0nE2UCDwVu-hdLVQPLMRX_MN_1WrtUFRLzH5ziGI3toCdPJKB2WBPKpi7_8dXQJVGTkmozXwuxEvtLXAbOfPo/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>
11. Menu 11:

<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/AVvXsEginDPGMhgVL74fwZOIY9E-in0ou3n6CvkrS9F-i2RWoJDgePua9PxkXgMSK7zl59MKmmTwV8uZtVTdxrmoEKp8LVcpYP2RwaG0t70CtOyXNCfEPbQstSje_0UDIAZmw_Ngi-kvQdf_S9E/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/AVvXsEha0G-BYcWn15brud4c6PuefvuSbNnloSLMf-yKizI-3TZsLOVvRyTV2_ynLNI0vpYjSLQNr5h8OWXvlOCmDJFAVzJkEFMORqYeOIZy8i-Otmqqkc4FeJnucj0BRsu3WZ-bLFzeS5F0RwM/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>
12. Menu 12:

<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>
14.Menu 14:

<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/AVvXsEg4uQU3Zt4sxP3yom9rwnc-KAhDYaTfECeOp7KUK3l2bnFJ2cEAPE3XvY7kVUluAjWHY-mhlXHTOTJ17q6onUedikX3cKfKqeJvXFBpsDJq1gxsXBrwH2E_4KMFxTHSHlii08Hpwh5kxUU/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/AVvXsEh5kESe833bp5EAG2DUrocwdDjWcY6AB4S-wUt0aWD1TYf6kTdmIYJPPaNHppNJ7YkZTCec0ArTvqG6TqUkd9SBEUeKEji2cGvY6WFP1LOIFvkCOPg3HoxR8dBuTPqNJwSSFoAA6ypMLDI/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>
15. Menu 15:

<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/AVvXsEiX5haSV-mLOgWkS9LDqpMu5dGzA0l30N_wYO0yquijvUOCJGJLWOlqcCxl2koWxSErgEtyzeZykBnp24j_XobS3ejhg-P79S3K20JwTuXzST7-hJrhDvJzthx9LpLwgyJFI2oc_0Awe-4/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/AVvXsEjq0ACRkSwvbP3CttFYEVRYgpsnY49uYsmKPEuoXzO2Y1IGdOWC06nMBaD7KZVIhkpqpG68wcjCSv-b2PimbZSlcWTEUvgENUpZ2PDz0nDqP_cePUNmuBRHVaaM93QpwnkpEJf0wGtdxA0/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>
16. Menu 16:

<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/AVvXsEiaE6Om9utFXUEkKbV-bqbcrUnUT_3DEaw5mwMgUVUJOqkNJQ09k7jWBOTQNiTn3Rlk-EqdcfDI6y69InBkkH4RETAjfigGR1PW99kp9QhkN1aBsb5YSbn-1QvDMxGEsgxR-cifvywHGo4/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/AVvXsEjIZ6vy3kZpmw54ECGvRYaVgJKNYHgZChUDkXmhVBmPkaoI8_d3dbRQcIaqfgGYThy2kPtZcX-djLmsxrQHmYGoOw426auRskXYA13P5DhMxIvhB-va2RNapNtQfaKIqt2rVhJLPa-u3OA/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>

No comments:

Copyright © 2013 Mr Sum