test odd selector
HTML
<div id="main-nav"><ul><li>
<a href="services/" onfocus="blurLink(this);" >Services</a>
<div class="main-nav-dd rows2">
<!-- 1 -->
<div class="main-nav-dd-column">
<h3>Some 11111</h3>
<ul>
<li><a href="#">Descriptionjhkjkjlkjlkjlkjlkj777</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Faq</a></li>
<li><a href="#">more 005</a></li>
<li><a href="#">more 006</a></li>
<li><a href="#">more 007</a></li>
<li><a href="#">more 008</a></li>
</ul>
</div>
<!-- 2 -->
<div class="main-nav-dd-column">
<h3>Another 2222</h3>
<ul>
<li><a href="#">Description</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Faq</a></li>
</ul>
</div>
<!-- 3 -->
<div class="main-nav-dd-column">
<h3>Inspection 3333</h3>
<ul>
<li><a href="#">Description</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Faq</a></li>
</ul>
</div>
<!-- 4 -->
<div class="main-nav-dd-column">
<h3>ITEM 4444</h3>
<ul>
<li><a href="#">short 001</a></li>
<li><a href="#">short 002</a></li>
</ul>
</div>
<!-- 5 -->
<div class="main-nav-dd-column">
<h3>ITEM 5555</h3>
<ul>
<li><a href="#">Description</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Faq</a></li>
</ul>
</div>
<!-- end -->
</div>
</li></ul></div>
CSS
a
{
text-decoration: none;
background: #7A7A7A;
color: white;
padding: 0 5px;
}
ul, li
{
margin: 0;
padding: 0;
float: left;
display: block;
width: auto;
}
.main-nav-dd a
{
float: left;
display: block;
width: 120px;
background: #D9D9D9;
color: #8F8F8F;
padding: 0;
/* */
border-bottom: 1px #BDBDBD solid;
}
.main-nav-dd a:hover
{
background: #BDBDBD;
}
.main-nav-dd-column
{
float: left;
width: 120px;
/*border: solid #ff0 1px;*/
/*equal heights*/
padding-bottom: 32767px;
margin-bottom: -32767px;
background: #BDBDBD;
}
.main-nav-dd-column h3
{
float: left;
width: 120px;
background: #969696;
}
/*The Adjacent-Sibling Selector*/
.main-nav-dd-column > ul + h3
{
border-top: 1px dashed white;
}
.main-nav-dd-column + .main-nav-dd-column
{
border-left: 1px solid white;
}
.main-nav-dd
{
overflow: hidden;
height: auto;
}
/*css hide-show*/
/*
.main-nav-dd
{
display: none;
}
#main-nav:hover .main-nav-dd
{
display: block;
}
*/
JavaScript
/*
*/
$("#main-nav .main-nav-dd.rows2 .main-nav-dd-column:even").each(function() {
$(this).next().contents().detach().appendTo($(this));
$(this).next().remove();
});
// move the 2nd, 4th, 6th, and so on
//$("#main-nav .main-nav-dd.rows2 .main-nav-dd-column:even").next().css('border', 'green 1px solid');
//$("#main-nav .main-nav-dd.rows2 .main-nav-dd-column:even").next().detach().appendTo($(this));
//$("#main-nav .main-nav-dd.rows2 .main-nav-dd-column:odd").html().detach().appendTo($(this).prev());
//$("#main-nav .main-nav-dd.rows2 .main-nav-dd-column:odd").detach();
/*
$("#main-nav .main-nav-dd.rows2 .main-nav-dd-column:even").load(function(i) {
var $this = $(this);
$this.css('border', 'green 1px solid');
});
*/
/*
$("#main-nav .main-nav-dd.rows2 .main-nav-dd-column:even").append( $("#main-nav .main-nav-dd.rows2 .main-nav-dd-column:odd").html());
*/