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
    }
}