I am trying to do vertical tabs

I am trying to do vertical tabs

Please look at this link. I trying to get this effect with vertical tabs.


This is dynamic with ajax and c# to and 

<div id="bookContainer">
<div id="book"></book>

</div>

$("#BookContainer").append(ContentMenu);

function GetContents ( BookID ) {
$. ajax( {
type: "POST", // AJAX type post
url: "tabletbook.aspx/GetContentsMenu",
data: '{"BookID": "' + BookID + '"}',
contentType: "application/json; charset=utf-8", //This is 
dataType: "json", //We need to specifiy JSON as to have the
success: function ( msg) { // The msg that comes back has in
ContentMenu = msg. d; //Lets copy the links to a global array

}
});
}
C#
  2.   [WebMethod(true)]
  3.         public static string GetContentsMenu(int BookID)
  4.         {
  5.             var BDC = new BookDC();
  6.             var fb = BDC.GetBook(BookID);   
  7.             var sb = new StringBuilder();       
  8.             List<spGetChaptersResult> chaps = BDC.DataContext.spGetChapters(BookID).ToList();
  9.             List<string> ChapsString = new List<string>();
  10.            foreach (spGetChaptersResult chptr in chaps)
  11.            {
  12.                ChapsString.Add(chptr.PageNumber.ToString() + " " + " " + chptr.ChapterTitle);
  13.                
  14.             }
  15.             string[] SortedChapterPages = ChapsString.ToArray();
  16.             Array.Sort(SortedChapterPages, new Common.NaturalComparer());
  17.             sb.Append("<div class='tabs-right'>");
  18.             foreach (string scp in SortedChapterPages)
  19.             {
  20.                string outp = scp.Replace("'", "");
  21.                sb.AppendLine("<ul>");
  22.                sb.AppendLine("<li>");
  23.                sb.AppendLine("<a href='#' id='pgNum'>");
  24.                sb.AppendLine(" ");
  25.                sb.AppendLine(outp);
  26.                sb.AppendLine(" ");
  27.                sb.AppendLine("</a>");
  28.                sb.AppendLine("</li>");
  29.                sb.AppendLine("</ul>");
  30.             }
  31.             sb.AppendLine("</div>");
  32.             string cpret = sb.ToString();
  33.             return cpret;
  34.         }
css code:
  2. .tabs-right 
  3. { 
  4.     height: 100%;
  5.     font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
  6.     -moz-transform: scale(0.7) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
  7.     -webkit-transform: scale(0.7) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); 
  8.     -o-transform: scale(0.7) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
  9.     -ms-transform: scale(0.7) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
  10.      transform: scale(0.7) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
  11.      -webkit-border-radius: 50px;
  12.      border-radius: 50px;
  13. }
  14. .tabs-right >ul {
  15. float: left;
  16.     width:250px;
  17.     top:0;
  18.     display: block;
  19.     border: 1px solid #DDD;
  20.     padding:0;
  21.     -webkit-border-radius: 50px;
  22.     border-radius: 50px;
  23. }
  24. .tabs-right >ul >li {
  25.     width: 250px;
  26.     height:15px;
  27.     list-style-type: none;
  28.     display: block;
  29.     font-size: 1.11em;
  30.     border-right-width: 0;
  31.     border: 1px solid #000;
  32.     margin: auto;
  33.     padding: 10px 15px !important;  
  34.     background: whiteSmoke; /* Old browsers */
  35.     background: -moz-linear-gradient(top, #000000 0%, #f2f2f2 100%); /* FF3.6+ */
  36.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #f2f2f2)); /* Chrome,Safari4+ */
  37.     background: -webkit-linear-gradient(top, #000000 0%, #f2f2f2 100%); /* Chrome10+,Safari5.1+ */
  38.     background: -o-linear-gradient(top, #000000 0%, #f2f2f2 100%); /* Opera 11.10+ */
  39.     background: -ms-linear-gradient(top, #000000 0%, #f2f2f2 100%); /* IE10+ */
  40.     background: linear-gradient(top, #000000 0%, #f2f2f2 100%); /* W3C */   
  41.      -webkit-border-radius: 50px;
  42.      border-radius: 50px;
  43. }

  45. .tabs-right >ul >li >a 
  46. {
  47.     color:white;
  48.     width:100%;
  50. }
  51. .tabs-right > div {
  52. height: 35em;
  53. }