jQuery - изменить вертикальное меню на горизонтальное

Question

Я пытаюсь использовать плагин Tendina jQuery. Он отлично работает, но я хотел бы меню должны быть разложены по горизонтали, как это:

Я возиться с CSS (inline-block и другие вещи), но не смог чтобы он работал.

Я не собираюсь публиковать JS, потому что это много кода ... Я думаю, что слишком много, чтобы вставить здесь, но не стесняйтесь проверить JSFiddle.

Любая помощь будет высоко оценена. Спасибо.

HTML

<ul class="dropdown"> 
    <li> 
    <a href="#">Menu 1</a> 
    <ul> 
     <li><a href="#">Submenu 1</a></li> 
    </ul> 
    </li> 
    <li> 
    <a href="#">Menu 2</a> 
    <ul> 
     <li><a href="#">Submenu 2</a></li> 
     <li><a href="#">Submenu 2</a></li> 
     <li><a href="#">Submenu w/ children</a> 
     <ul> 
      <li>Subsubmenu 2</li> 
      <li>Subsubmenu 2</li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
    <li> 
    <a href="#">Menu 3</a> 
    <ul> 
     <li><a href="#">Submenu 3</a></li> 
     <li><a href="#">Submenu 3</a></li> 
    </ul> 
    </li> 
</ul> 

CSS

.dropdown { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; 
    width: 100%; 
    background-color: #f7f7f7; 
    font-family: Arial, Helvetica, sans-serif; 
    padding-top: 20px; 
    font-size: 12px; 
} 

.dropdown li { 
    padding: 0 10px; 
} 

.dropdown li.selected { 
    background-color: #f2f2f2; 
} 

.dropdown li a { 
    display: block; 
    width: 100%; 
    padding: 10px; 
    text-decoration: none; 
    text-transform: uppercase; 
    color: black; 
} 

.dropdown li > ul li { 
    padding: 0 20px; 
} 

.dropdown li > ul li a { 
    color: gray; 
} 

.dropdown li > ul li > ul li { 
    padding: 10px 30px; 
} 

Answer 1

Вот обновленная версия вашего fiddle

.dropdown 
    { 
     position:absolute; 
     left:0; 
     top:0; 
     height:100%; 
     width:100%; 
     background-color:#f7f7f7; 
     font-family:Arial,Helvetica,sans-serif; 
     padding-top:20px; 
     font-size:12px 
    } 

    .dropdown li 
    { 
     padding:0 10px; 
     display:inline-block; 
     width:auto 
    } 

    .dropdown li.selected 
    { 
     background-color:#f2f2f2 
    } 

    .dropdown li a 
    { 
     display:block; 
     width:100%; 
     padding:10px; 
     text-decoration:none; 
     text-transform:uppercase; 
     color:#000 
    } 

    .dropdown ul 
    { 
     position:absolute 
    } 

    .dropdown li > ul li 
    { 
     padding:10px 0; 
    } 

    .dropdown li > ul li a 
    { 
     color:gray 
    } 

    .dropdown li > ul li > ul li 
    { 
     padding:10px 30px 
    } 
}