Question

I have attached the image how i view. i was trying to fix the floating. but i couldn’t align correctly in to a straight line. please help me on this.

Here how the li look [http://digibrush.net/mclarens/where-to-buy/][1]

HTML

<ul class="tabs-shortcode-list">
  <li ui-state-default ui-corner-top ui-tabs-selected ui-state-active ><a href="#A-0" >A</a></li>
  <li ui-state-default ui-corner-top><a href="#B-1" >B</a></li>
  <li ui-state-default ui-corner-top><a href="#C-2" >C</a></li>
  <li ui-state-default ui-corner-top><a href="#D-3" >D</a></li>
  <li ui-state-default ui-corner-top><a href="#E-4" >E</a></li>
  <li ui-state-default ui-corner-top><a href="#F-5" >F</a></li>
</ul>

CSS

.tabs-shortcode.ui-tabs {
zoom:1;
clear:both;
background:#FFF;
padding:0;
margin:0;
}

.tabs-shortcode.ui-tabs-nav {
list-style:none!important;
padding:.2em 0 0!important;
margin: 0!important;
}
.tabs-shortcode .ui-tabs-nav:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .tabs-shortcode  .ui-tabs-nav          { zoom: 1;
} /* IE6 */
*:first-child+html .tabs-shortcode .ui-tabs-nav { zoom: 1;
} /* IE7 */

.tabs-shortcode .ui-tabs-nav li {
position:relative;
float:left;
border:1px solid #CCC;
background:#EEE;
list-style:none!important;
z-index: 100;
padding:0;
 }

 .tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
background:#FFF;
color:#111;
 }

 .tabs-shortcode .ui-tabs-nav li:before {
content:"";
 }

 .tabs-shortcode .ui-tabs-nav li a {
float:left;
text-decoration:none;
padding:4px 10px;
color:#333;
border:none!important;
 }

 .tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
 .tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
 .tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-state-processing a {
cursor: default;
  }

  .tabs-shortcode .ui-tabs-nav li a,
  .tabs-shortcode.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
cursor:pointer;
  }

.tabs-shortcode .ui-tabs-panel {
display:block;
border-width:0;
background:none;
}

.tabs-shortcode .ui-tabs-hide {
display:none!important;
}

.tabs-shortcode.ui-tabs-panel {
clear:both;
}

/* Position Top */
 .tabs-shortcode-top .ui-tabs-nav{
border-bottom: 1px solid #CCC;
 }
 .tabs-shortcode-top .ui-tabs-nav li.ui-tabs-selected {
padding-bottom:1px!important;
border-bottom:0;
margin:1px .3em -1px 0!important;
 }
 .tabs-shortcode-top .ui-tabs-nav li {
border-bottom-width:0!important;
margin:1px .3em 0 0!important;
}

Answer 1

the problem is with .ui-tabs-nav.Comment all css within this class.this will make the menu appear vertical.Now write ur own css with another class name . Replace ui-tabs-nav with new class in HTML