true pillager: Tab Nav "Pro Dropline"

This time I will try to apply a horizontal tab on the template. Try to note the navigation tab under the header on this blog. Navigation tab is a result of the work of Stu Nicholls given name: pro_dropline_2.

Step by step to add the code "Pro Dropline 2 is as follows:

1. Add the code below before: ]]></b:skin>

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menus/pro_dropline_2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#pro_linedrop {
height:35px;
width:100%;
background:url(http://i288.photobucket.com/albums/ll179/ahnning/image%20tab%20profline2/black_0.gif);
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
z-index:100;
}

#pro_linedrop .select {
margin:0;
padding:0;
list-style:none;
white-space:nowrap;
}

#pro_linedrop li {
float:left;
background:url(http://i288.photobucket.com/albums/ll179/ahnning/image%20tab%20profline2/black_1.gif);
}

#pro_linedrop li.lrt {
float:right;
background:url(http://i288.photobucket.com/albums/ll179/ahnning/image%20tab%20profline2/blue_1.gif);
}

#pro_linedrop .select a {
display:block;
height:35px;
float:left;
background: url(http://i288.photobucket.com/albums/ll179/ahnning/image%20tab%20profline2/black_0.gif);
padding:0 0 0 15px;
text-decoration:none;
line-height:33px;
white-space:nowrap;
color:#fc0;
}

#pro_linedrop .select li.lrt a {color:#0ff;}

#pro_linedrop .select a b {
display:block;
padding:0 30px 0 15px;
background:url(http://i288.photobucket.com/albums/ll179/ahnning/image%20tab%20profline2/black_0.gif) right top;
}

#pro_linedrop .select li.line a b {
background:url(http://i288.photobucket.com/albums/ll179/ahnning/image%20tab%20profline2/black_0a.gif) right top;
}

#pro_linedrop .select a:hover,
#pro_linedrop .select li:hover a {
background: url(http://i288.photobucket.com/albums/ll179/ahnning/image%20tab%20profline2/black_1.gif);
padding:0 0 0 15px;
cursor:pointer;
color:#fff;
}

#pro_linedrop .select li.lrt a:hover,
#pro_linedrop .select li.lrt:hover a {
background: url(http://i288.photobucket.com/albums/ll179/ahnning/image%20tab%20profline2/blue_1.gif);
}

#pro_linedrop .select a:hover b,
#pro_linedrop .select li:hover a b {
display:block;
float:left;
padding:0 30px 0 15px;
background:url(http://i288.photobucket.com/albums/ll179/ahnning/image%20tab%20profline2/black_1.gif) right top;
cursor:pointer;
}

#pro_linedrop .select li.line a:hover b,
#pro_linedrop .select li.line:hover a b {
background:url(http://i288.photobucket.com/albums/ll179/ahnning/image%20tab%20profline2/black_1a.gif) right top;
}

#pro_linedrop .select li.lrt a:hover b,
#pro_linedrop .select li.lrt:hover a b {
background:url(http://i288.photobucket.com/albums/ll179/ahnning/image%20tab%20profline2/blue_1.gif) right top;
}

#pro_linedrop .select li.lrt a:hover b.arrow,
#pro_linedrop .select li.lrt:hover a b.arrow {
background:url(http://i288.photobucket.com/albums/ll179/ahnning/image%20tab%20profline2/blue_1a.gif) right top;
}

#pro_linedrop .sub {
position:absolute; left:-9999px; width:0;
}

/* IE6 only */
#pro_linedrop table {
border-collapse:collapse;
margin:-1px -10px -1px -1px;
font-size:1em;
width:0;
height:0;
}

#pro_linedrop .sub {
margin:0;
padding:0;
list-style:none;
}

#pro_linedrop .sub li {background:transparent;}

#pro_linedrop .select :hover .sub {
height:25px;
position:absolute;
width:100%;
top:35px;

left:0;
text-align:center;
background:#fff url(http://i288.photobucket.com/albums/ll179/ahnning/image%20tab%20profline2/fade.gif);
border-bottom:1px solid #aaa;
}

#pro_linedrop .select :hover .rt li {float:right;}

#pro_linedrop .select :hover .sub li a
{display:block; height:25px; line-height:22px; float:left; background:#fff url(http://i288.photobucket.com/albums/ll179/ahnning/image%20tab%20profline2/fade.gif); padding:0 16px; margin:0; white-space:nowrap; color:#333;font-size:10px;}

#pro_linedrop .select :hover .sub li.subline a {color:#c00;}

#pro_linedrop .select :hover .sub li a:hover,
#pro_linedrop .select :hover .sub li:hover
{color:#000; line-height:20px; position:relative; background:#fff url(http://i288.photobucket.com/albums/ll179/ahnning/image%20tab%20profline2/fade.gif) left bottom;}

2. Then add the code below before : </head>

3. Then add the code below before : <div id='content-wrapper'>

<div id='pro_linedrop'>
<ul class='select'>
<li><a href='#nogo'><b>Home</b></a></li>
<li class='line'><a href='#nogo'><b>Products</b></a>

<ul class='sub'>
<li><a href='#nogo'>Test1</a></li>
<li><a href='#nogo'>Test2</a></li>
<li><a href='#nogo'>Test3</a></li>
<li><a href='#nogo'>Test4</a></li>
<li><a href='#nogo'>Test5</a></li>
</ul>

</li>
<li class='line'><a href='#nogo'><b>Services</b></a>

<ul class='sub'>
<li><a href='#nogo'>Test6</a></li>
<li><a href='#nogo'>Test7</a></li>
<li><a href='#nogo'>Test8</a></li>
<li><a href='#nogo'>Test9</a></li>
</ul>

</li>
<li class='lrt'><a href='#nogo'><b>Privacy Policy</b></a></li>
<li class='line lrt'><a href='#nogo'><b class='arrow'>Shop</b></a>


<ul class='sub rt'>
<li><a href='#nogo'>Online</a></li>
<li><a href='#nogo'>Catalogue</a></li>
<li><a href='#nogo'>Mail Order</a></li>
</ul>

</li>
<li class='line lrt'><a href='#nogo'><b class='arrow'>Contacts</b></a>


<ul class='sub rt'>
<li><a href='#nogo'>Support</a></li>
<li><a href='#nogo'>Sales</a></li>
<li><a href='#nogo'>Buying</a></li>
<li><a href='#nogo'>Photographers</a></li>
<li><a href='#nogo'>Stockist</a></li>

</ul>

</li>
</ul>
</div>