how to make the nav as horizontal?
Greeting ,
how to make the nav as horizontal? i have this code please reply me
<style type="text/css">
.tab-nav {
width: 610px;
overflow: hidden;
background: #ddd url(tab-slide.png) no-repeat 0 0;
}
.tab-nav ul {
position: relative;
float: left;
width: 1600px;
margin-left: 535px;
padding-left: 0;
list-style-type: none;
background-color: #fff;
}
.tab-nav li {
float: left;
clear: left;
}
.tab-nav a {
display: block;
width: 74px;
border-right: 1px solid #ddd;
height: 25px;
line-height: 24px;
float: left;
text-align: center;
text-decoration: none;
color: #000;
background: url(tab-slide.png) no-repeat 2px -194px;
}
.tab-nav a.expanded {
background-position: 2px -244px;
}
</style>
<div id="tab-nav" class="tab-nav">
<ul>
<li>
<a href="#">one</a>
<ul>
<li><a href="#">sub one</a></li>
<li><a href="#">sub two</a></li>
<li><a href="#">sub three</a></li>
</ul>
</li>
<li>
<a href="#">two</a>
<ul>
<li><a href="#">b sub one</a></li>
<li><a href="#">b sub two</a></li>
<li><a href="#">b sub three</a></li>
<li><a href="#">b sub four</a></li>
<li><a href="#">b sub five</a></li>
</ul>
</li>
<li>
<a href="#">three</a>
<ul>
<li><a href="#">sub one</a></li>
<li><a href="#">sub two</a></li>
<li><a href="#">sub three</a></li>
</ul>
</li>
</ul>
</div>
$(document).ready(function() {
$('#tab-nav-1 > ul > li > a').click(function() {
var $parentItem = $(this).parent(),
slideAmt = $(this).next().width(),
direction;
if (parseInt($parentItem.css('marginLeft'), 10) < 0) {
direction = '+=';
$(this).removeClass('expanded');
} else {
$(this).addClass('expanded');
direction = '-=';
}
$parentItem
.animate({marginLeft: direction + slideAmt}, 400);
return false;
});
});
please reply