قوائم واشرطة التنقل للمدونات بأكثر من 30 استايل متنوع

السلام عليكم ورحمة الله وبركاته

اقدم لكم مجموعة كبيرة من اشرطة القوائم للمدونات باستايلات جديدة وكثيرة

طريقة الاضافة 

1. اذهب الى لوحة التحكم في مدونتك
2. القالب
3. تحرير html
4. ثم ابحث عن الرمز  ]]></b:skin>

اذا كنت لا تعرف كيث تبحث عن الاكواد في قالب مدونتك انظر الى الصورة هنـــــــا

بعد ان تجد الرمز المطلوب اضف الكود التالي فوق الرمز ]]></b:skin> مباشر

ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
width: 100%;
float: left;
background: #222;
font-size: 1.2em;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTR8yLamVmCuC4O8oYhz2jNIC4HWcBNDZFicZQcL9VD495hHMqrPZsXcYOItPgMn91Iaxzuv10cfdlOdd2mkpmXNkuow2FqCOL_P0g-IkpcIZyl2oCnsIGvO5WCtlkNbA1uPwIAH5kuQIE/s1600/topnav_bg-namkna-ngoctra.png) repeat-x;
z-index:100}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base--*/
z-index:100}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG8uPnlI2PDOoVZRkcsMrU8ZC2gGMYnlB629mQzZeVFEtdZhkjfekuhraVb0J06EplvJ-RxLi11asZCAuHJGSPm2ub5pcjvHixXAnwjo5UCTTavPd3ME2Vz2l4331WlHmCw0Nt48e9wH8w/s1600/topnav_hover-namkna-ngoctra.png) no-repeat center top;
z-index:100}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4gWgZHmAjjbJt1wt8tQVmeYDt0VoA9EkaQbzubctW5BfFNb5Z3TzKV3iXw6GpjB3-YelqsQIancZgCYIBdoJB-tAOkMZkDpM3Iq3phzYgtTvuQFLnKP64kyQaA43cfHwTiFjSXYp9RqLD/s1600/subnav_btn-namkna-blogspot-ngoctra.png) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm4FqAfNFCGprizqmaOZB9SLJh96pQO_2OOm6or0vQZjDQj_IJGpAplTWjhbfkwTUkwRQ1-ua-SbnR3VqCtOdXFc_ztKSBU0E_0VOhjqYdmCvFceeQ6uJ1cgkszfqEyzBV-w-KdHQV5A_S/s1600/dropdown_linkbg-namkna-blogspot-ngoctra.png) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm4FqAfNFCGprizqmaOZB9SLJh96pQO_2OOm6or0vQZjDQj_IJGpAplTWjhbfkwTUkwRQ1-ua-SbnR3VqCtOdXFc_ztKSBU0E_0VOhjqYdmCvFceeQ6uJ1cgkszfqEyzBV-w-KdHQV5A_S/s1600/dropdown_linkbg-namkna-blogspot-ngoctra.png) no-repeat 10px center;
}
#header img {
margin: 20px 0 10px;
}

5. ابحث عن الرمز  </head> ثم اضف الكود التالي فوقه مباشر

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

$(&quot;ul.subnav&quot;).parent().append(&quot;<span/>&quot;); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

$(&quot;ul.topnav li span&quot;).click(function() { //When trigger is clicked...

//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find(&quot;ul.subnav&quot;).slideDown(&#39;fast&#39;).show(); //Drop down the subnav on click

$(this).parent().hover(function() {
}, function(){
$(this).parent().find(&quot;ul.subnav&quot;).slideUp(&#39;slow&#39;); //When the mouse hovers out of the subnav, move it back up
});

//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass(&quot;subhover&quot;); //On hover over, add class &quot;subhover&quot;
}, function(){ //On Hover Out
$(this).removeClass(&quot;subhover&quot;); //On hover out, remove class &quot;subhover&quot;
});

});
</script>

6. الان اذهب الى التخطيط اضافة ادوات اضف اداة HTML / Javarscip ثم الصق الكود التالي حيث تريد ظهوره مع التعديل عليه بإضافة روابط واسماء الصفحات المطلوبة

<ul class='topnav'>
<li><a href='/'>Home</a></li>
<li>
<a href='#'>Menu 1</a>
<ul class='subnav'>
  <li><a href='#'>Menu con 1.1</a></li>
  <li><a href='#'>Menu con 1.2</a></li>
  <li><a href='#'>Menu con 1.3</a></li>
  <li><a href='#'>Menu con 1.4</a></li>
  <li><a href='#'>Menu con 1.5</a></li>
</ul>
</li>
<li>
<a href='#'>Menu 2</a>
<ul class='subnav'>
  <li><a href='#'>Menu con 2.1</a></li>
  <li><a href='#'>Menu con 2.2</a></li>
  <li><a href='#'>Menu con 2.3</a></li>
  <li><a href='#'>Menu con 2.4</a></li>
  <li><a href='#'>Menu con 2.5</a></li>
  <li><a href='#'>Menu con 2.6</a></li>
</ul>
</li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
<li><a href='#'>Menu 6</a></li>
</ul>

الستايل الثاني

طريقة الاضافة كما هو موضوع بالاعلى  فقط سوف اضع التسميات 

طريقة الاضافة 

1. اذهب الى لوحة التحكم في مدونتك
2. القالب
3. تحرير html
4. ثم ابحث عن الرمز  ]]></b:skin>

بعد ان تجد الرمز المطلوب اضف الكود التالي فوق الرمز ]]></b:skin> مباشر

#drop {
margin: 0;
padding: 15px;
z-index:100;
position:relative;
}

#dropmenu_namkna li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#dropmenu_namkna li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#dropmenu_namkna li a:hover {
background: #C8C8C8;
}

#dropmenu_namkna li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
z-index:30; 
}

#dropmenu_namkna li ul li {
float: none;
display: inline;
}

#dropmenu_namkna li ul li a {
width: auto;
background: #CAE8FA;
}

#dropmenu_namkna li ul li a:hover {
background: #A3CEE5;
}

  <script type='text/javascript'>
  //<![CDATA[

var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;

function dropmenu_namkna_open()
  {  dropmenu_namkna_canceltimer();
  dropmenu_namkna_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function dropmenu_namkna_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function dropmenu_namkna_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}

function dropmenu_namkna_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}

$(document).ready(function()
  {  $('#dropmenu_namkna > li').bind('mouseover', dropmenu_namkna_open)
  $('#dropmenu_namkna > li').bind('mouseout',  dropmenu_namkna_timer)});

document.onclick = dropmenu_namkna_close;
  //]]>
  </script>

<ul id="dropmenu_namkna">
<li><a href="/">Home</a>

<li><a href="#">Menu 1</a>
  <ul>
  <li><a href="#"> tên menu 1.1</a></li>
  <li><a href="#"> tên menu 1.2</a></li>
  <li><a href="#"> tên menu 1.3</a></li>
  </ul>
</li>

<li><a href="#"> tên menu 2</a>
  <ul>
  <li><a href="#"> tên menu 2.1</a></li>
  <li><a href="#"> tên menu 2.2</a></li>

  </ul>
</li>

<li><a href="#">Menu 3</a>
  <ul>
  <li><a href="#"> tên menu 3.1</a></li>
  <li><a href="#"> tên menu 3.2</a></li>
  <li><a href="#"> tên menu 3.3</a></li>
  <li><a href="#"> tên menu 3.4</a></li>
  </ul>
</li>

 <li><a href="#">Menu 4</a></li>
 <li><a href="#">Menu 5</a></li>
</li>
</ul>

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

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

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

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

<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/AVvXsEg-S90Onl4FUXLiuJ4iDTQxJKqWFng9Nv6g4cgscS-HIuMPN53uAGc8188aS0AbXzK0S3psBfLkN4pmME0JDx-_1lt3J9S_K3QafVzgpLQNF4_3BlG1LIurkLETm1QwyctipONjxSfYH8M/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>

<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/AVvXsEj8evIh0x6MgrmWX6wp-9_Oi_uNXJeTWS-iMQ76Pt5jap_yn6FsYxmD9ryulMZ-xT8N_bVfjaVSlsQEfiU9sR8YBL3MUEVbxqcNI7PhqdUlcAvi5Oks9wt6U4rjfklVYkBZMytPZKQD2Do/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/AVvXsEiu3gOgapG6NhTDc1vHz0LE-asJ_BiNJTPqpxVsv6Gf4HKjJiHkA0DHaixETMJUtBODon3RrgGhPuJ2ugp61kF4D8UvmdC58lMCSN8TprARb8xlTu4qSrGRE-9pIEc4tVt8zJKreU6p-IM/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>

<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/AVvXsEjkjFGzbL-YxzXmkmdKXHe6pkzhu-K5rW38DpnBFDyW1uzXXP8aR4jfI-m4OyKR44Elldi3TGNlcRbKn12SzAv5JzO-f8pv_Sokj6IEYUh6aQVkWzgzYn-MoSeCm1txevcSkwauxoIZ9vM/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/AVvXsEiuTUq1KOcOSzr0oBliWgbLvDc-RgUqoYfsFqEYYtTvH8Oc88fB_ZUAxIwIhxXmszc738-HPOZxUTmBZDYhqm4H_Qrh5DtICBEdLEeieeK9dGuQrN2i_7K4X6dVJVQxV9H_hmoa6YHg1YY/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>

<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/AVvXsEje595gLSg0zJEqxinkfAO1SP4FqJHP1oIiDqApx1lJlwFs9d-JPTF7fPk3uEW09pj6Jib90_elqw0Js4pdtz9fnKikCHy1slf7SjnEKbOXNiw3MvEWA_0RTW2LZMU4zePyX_XAM8DjO58/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/AVvXsEjdUSwlGCn1tQtyQGVWg6wpFRusCSisUCpbBm1_iJDBVQxA4E3w8eXrS4CuLzwfkMMUv2Bo0xgXZm6UWrIYDv8uymxfcdJbgqbkZWwvc8fEqAtPRJkUeaefpgmDNyVmqbFT16u-sqDSbug/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>

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

<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/AVvXsEhSkB6_x_R4grGuKNf5cF9rpEv2oNjP2_eUvwHTCsc-gaWR20uMcBcGd8LYqYhdoZ2WUBxSdZYmhpQ30F9vXnTsMN9FhyD_ISM77DsleSeGpmgeYNsVcZGuxB1VHXJ0h1159dYUZ3S9WfI/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/AVvXsEgBLkzUmIf6L1-tIn8cX6ym8cDZvfLhH5UFpDWEBZjKBFDqVNQNPoBZqukm3PFvGdTDffuhJykq6kB4mfkfXT_otgykXpXCyQi5GxlF0ZVCDagjXIDTveRQlrzkpmw3u7VsCX020FtHw6k/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>

<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/AVvXsEgDUVNS8ec9YUAyPtCAm3Nusb9uWkBsocT-Y_U90gnSfmJyiDRtr6x3eHkTP1k22OJ-rd31jreEDtaYwyPptc0vYuwjFpH9paCBMVuDGCfN793_qyKuAiCcXNy8TQ4k-2nSc4DctWRTRbU/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/AVvXsEjlq1qmFUos_fnQVon-SSrZncIBBy9ACuoTk1fac8YlXIcn-bpgg7cc5c1XmN0tw64eBaZsDpAqssA4iPcLYP35yZsO3_dDAQivokqK5VjjLyjYBdYUK-S2gmMHx8e7skIacWOySqFaxi4/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>

<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/AVvXsEhQ5MEySUEswdtVw6Cr69RL8o3Yqu-qpWSlJTAKK3dwWtBSXLGaelpFfhRm2Rq9q9__yoNWeHQFXbWvsXxlyk2dTckoHuFS4FAkXBunVJwCommpqth3SVqPxujWDQzJNEC0Kh3n27zTmlI/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/AVvXsEiNRlDLRjTSuMzc8y6V5MPMrejDYJUDgifRiSmqZuEAqh_IG5c3GNik8SYmB4p80ShXGB3AXt1Op-efnyQOomxMyU6tMy3XnA9IfpF-NUO2Tj63p-MG62LPibnpZnwm1iB35JhOkr0oGF8/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>

<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/AVvXsEiIutQFPBO362ub_nqt-xNL213-uFxExe0rfU5xyH4_XpSYO6ofqcgz9m9Yxz1ahUA1p0Zlf5ikm69uUymN4_43qyJmounVUN3IXg9QynbZgdjgCVDQrjkvcJw2W9b0QhdWnPHyJXjp3M4/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/AVvXsEggGhOsY_Awpbt5OvJ8Ws20DZxSLraa7ysb07R7O2gZE3GxqHywztQ28Roptg7_KtqhsUxmf9i9kKVbQx3luU8nu59zGAApFb1KKahh6SmbMHc3QjGQsvMAJ-fS3mQnFoDbF795y2lo5LY/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>

<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/AVvXsEgXFB_DKu0Q051qsF3tdJ7vRFioSlPWcY6b_tzBZ-AfKgMy9JAh_6kneJZu9nNGVlquCGfS_Ri1oOgTwQKB9Chc6CizhIH_qJRszNo-LAAL3fI6Drti3MO8uwnK4831PIWXD7IAtYr6qnI/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/AVvXsEic6-QV7hSNUlj7JwF-d416ZCwa3_L9V8yO8W4dXHgjmaFxMrHdi7_InSB3LHYS9hegL29Zn6LZ3rPIT-1BscreStYtfPxDoKDLxyWOe4SuOi4u3LRE8IRoteKV7WW7gWp7jFVXVG8ypA4/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>

<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/AVvXsEi_35FL4A-n_w9rlnotAQlnLFEVg65ETl0xiDdjvxIIph1ixRtWX5Ux8e1UCIzC8VK4csD25ttp2h9NZUYwkU46E5uKnSkLroBCeBNL3nkmQ6Q7lmC8s-EjtDVYJuR_oVs3qDTN-cofCic/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/AVvXsEgT60ggYWDhuKCHP1dY8mzBtJHLZi93oa5CB7lqJCTqPb56jLDMt8eWKqIZo1GxTOKggkyU4SXne1rjQasn6Qe2Lw0FROFxt-rml7JjXGtOYrJEoB2iRLrC9v65PIgFVWKLnqOfobp_Rxw/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>

<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/AVvXsEifkEzCa2MHoSuAm0TUGNlJtKwMBtPVRYN9Js2UqhZ46o2yV8-2R1fjaWq3cCS1q961nggu6rao1GF6h2h7xCfqGVvbUCAVjOxk7tHV-zPH-iOg_JgHhzv7PuqrkK8rDCaGHPRU2fC8Mhw/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/AVvXsEjHuGJYsMf6MsUX47TOfS9tq5E1331w95EZwQbqzT3gbTS37kuDI8FCOuuZM9YknGVGgB1EK5nilF3OjNvypFYk7oc2Vi1p46lVG7H5KclEyvLyEkeJPLoVE4gjkCcf3sNyF8YHKdmLgwM/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>

<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/AVvXsEiRETHHjBq9ziIhBmsni25pdLrZgyoy_SX6yAv1Ong8JIHEVhfZ2_xIelBazQDfbG9kuCi_byydNU0fLpwO77XexM7b27DRMlWvKFoSzpRjFbh1s6gLxlaXq4ZeEKea2Yt0omK3i57QCDs/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/AVvXsEgP_D7fqtKZVEbUU1sZ8DlRxFzFYcPT3w46GNGfbdy9PTePeV7Qp8mgkbZeJFzmpvQS-FlIFSOrC1YIfA94YGF1qZQ-EWOgS3I3TiI-AhHQTPmKaL4AkaUgrHAaCNcTglSxELUFsG6umpg/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>

<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/AVvXsEgv84smWAM5dYTRx_f0eI5XWAMUrcapUFNRNbNqluilS8c23EhtJQ_rimnJTdsNuejxYawnLqvEy89r0lW_wd3Bs0QkRJRdHyO2bom06jDsT8Wo-oRccJA5WYpG3op-d2a-SoIrlSIzVKo/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/AVvXsEgwtKcWco1xDQEcL3hJY7ailGJTaVwQhskjD00qTGU8zuAKTvQJ9MsgvXDxe3ASWPg0FWimD3DQ2zoqE3Z1F45qRSIq9YrJft0sbVEdwxFAhLwQiN4vZ_kizsXNkb4vzBNk-TIGhKtfDlQ/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>

<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/AVvXsEifG8PNErL7huO1USgOXI6cK2ISa1nOBN9NwzKTE9McN5MyvqiihS1Tv9GB7rRXwarZGsUyiKZe3HBsQd0bvucmQY0ZXLayMAZX_N4L-zWfHfErAcl5WKZaMjZh6q7Dtsl-kPZn3wumuZ4/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/AVvXsEjL9eWnC6usIeLTITnB3Evp_H2pfgjJBJvDYuRvOwEupkLScxBqs6I0HW61Oy005DbzI5E9lTvZzepfXjLx9-0Hs8QhG5pX6lLqhmvm6usg3c4CPf6wIsY739xRT9Vb7aT7ZdcWpiyRNBg/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>

<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/AVvXsEjHKPe3q-NlMYDyNpynQm2ONBDKhATgioSa9j-t9v0NzTA8AwKc_ylKBuhbbmCq43sr_jpBD1qOA93x0gFFT77iz2kcstYOjBc3HjE6Pzw-QBZ_CSGKgxqkSiMuKamjf5wuvY6M36DPnd4/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/AVvXsEh7qEUQICa7jsots3-5Lunn05BegS2hJ45S04hqSVEeLcEF7kMFkZs81C_8uxqmoLhe3_ja_QJaOZI6giGwHw6Zli8IDcrMxxvizZInRAG9uQkb7P9FkCQ7YzjR3EqPSuFD-bfUR9Myaec/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>

<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/AVvXsEiK2HG1A4yu4IWnYV1XKOHbCWMNsY56iTq6sDOSgk5bviUKQ0b4iksFVm6ZBmZ7uq6YXysPT7OWMi5FXifJBHEC4jzzquqty1F71VKTcTtz19DRyreu7BAg2DZTOO4xdZAksw6bhOIzU6M/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/AVvXsEj_rCJEn4w52v2orDpL-pknE5CO3RJWjhIFrcGb4Lke9Nt_UojPPJ-UmUlglyo4lkuNAu0DDPCEmZ8l8fnBC8bksWtKxSrPQP3kNLFpYdvojAsoZNwfBW2-bYW4bTN0Ltq-1L3ja1V9AN0/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>

<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/AVvXsEgRqV0CyL4TDmiKRXLN_XmqGblXyu9i06r5IZ9BKUzDMAh96SgZ5HAD27q64H59UK6P06S-kV0-bzIsqC-s2sCQIMHBl-GcX85qOQVoZsIWAc0U2AArnJUxU1xq2xUfAql1sENJ2-ChS7I/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/AVvXsEilDWfNHStLu2EYJWjN9Tue5Hqv1d0XztHlFprtHn8qBGYTaWzGxGW3hUNV_VzBVrkiMFn8XePMKNU0aF-fTZhtlyH3aPlnXtzY8FUjl4XtyernyNTIlYPwUA3BGEZLx1lS_7hTCyagaPM/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>

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

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

<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/AVvXsEiHsM06hur6zpmjoT7UJg_7N4ad-v1eqZm_o-y1wZVNmTAfV2IZcxEGn2-AjN-VJ-BvIKvy3DwzhyERqkDxyYGN92ouUIWDsREpKjof3yE3vdI624GMcHYZkCIE7Q07Y_ubpA_q4O2t9iM/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/AVvXsEi_YPwrhE_mKD_CMKjMknXmvZmCstQiQOrf0VKslvygmrLtnFJ05opk-KNBIYAHT2g8cZ0cHkMc0fo9bYWqhWEI8fpiKbkbO4cmDW6OUu11FGrRlOYVMJYzI3BGCbt3BKqgbzPO_Mww5QI/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>

<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/AVvXsEgq6FIyZjKiBTdb3VpjXaau145sPIUj_hMJ3ETispXrCz3ipvbb5SgXOUABvGOVZl4R2N6Q5SGOh6URpMSpXwnCaIsG8tnroINt_ugVUzvS8gYYJa34_a1J513r_s38C_Oojh9nmW9ulEM/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/AVvXsEjxx5TnfpFka6eySPs_TNDsuxt66_jC-EDiq4OeAy8eXZr7dWxqzSxSzaVdiiP2t0PLGGOIi-HY6_Z393fzwencUz1txC3vrY6erzyIb7xakX1lLki0xy5d5caR6QTvkOXwq8q0jg1Jook/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>

<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/AVvXsEiWr-csDtLpFByiBpuaVGkeP-D3OFCVUDIrLp37IpZOWR6GHMUx4zMPQxfosoIBFRTD55aO_mDiP3chJ4GP-7ZZedQHLx7HT9CbqDRIaqWx4g2iTXHmqgXXxcCcrJSimNBTJa9VkFgFWiI/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/AVvXsEjtAmqvk7plxVi6AhOshybfzSncI31KYMOO_O7cgoOQXI_VCDgWdQ8lFIGeaxHa8BLNqXPKl-oD6c3H2DfSKtnhGAmw5mCboW2opQ-cYMMuQHpW-xB0Qqwa2065dKIdpuhPaGfC6_qHL6s/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>

<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/AVvXsEj3s0fZmrnEDYINRfOTCfJ0wPvf05nbuuDZiLImahBT2xbJebyxJ9vn3RvyioI5snhTLkhoT8GGcqBmi6YtuodinACq1M0ygis6yrNQVSdBW5rkPeeauavqyvVtgTEfCdfipI4CL0QEni9x/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/AVvXsEgbiKI3Up47Gr0jUkAmLM_shxhWvoNeSrW93wkBjcMyX7RSbDssFmq2kgRbl4QR0lWsp9M2egKQqj2DFS9CL6Hnhy9FLjrkIfdh82N8ZfcvYO7s9Mqx7iBFa1wvJ-qJDjE1YEgcp5GBEEG2/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>

<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/AVvXsEinXfnpc4o5tPW79V9016kI0-lc-iyw8gYqL9Z6s0lxptQyXwXmG5rCO5NBvpMHhz5QoB85to13f6orC0OtU4BrXySqZAn1Axc9kLt0cj_Ytdf0JrMbbOhUhozFlv9nvF85eqXHUceCBC0/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/AVvXsEgxm_LpTo1vCct7SHVL9viT8CzrA2rl0AEF4Ha2Win0v0teheVDRmEpRf-JrQnIu2crJDG4K7ICACJozLCiTatuEktj8qNZBuhTxg4KDfocqmQlKYr3_7YNdSsaEalPIFrZLsbDRJNgEZA/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>

<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/AVvXsEi4WMML4d3RuQ7d_CaQGVthyphenhyphenGtLZEqCfFCzp_c3Z3GCiNwO3JVGoumE5aKHbTb-sJUJDUU80tz_wK5fRS6nX0IafMlixZP7lbj1RuLVsFgQopGMRov40cMwxPklhk0Tt7lkCNOGkZX4y00/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/AVvXsEgVS3myFj1yZRRXV8c4pPceureiRMc6w9GdK6txjME9JlwbXO1ZnpKrRPORNHfPBp7zJdMaA5obnT4Wg1U7TYiDKzzyGea7rx9TS_CarUXMM8N34zF_Ez4STunPvgUlf_AbX4ZW3hA_WBE/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>