需要在其父项的右侧显示子菜单答案

【问题标题】：Need to show submenu to the right of it's parent item需要在其父项的右侧显示子菜单
【发布时间】：2014-03-21 21:52:28
【问题描述】：

我有一个这样的无序列表：

<ul>
 <li>Parent-1
  <ul>
    <li>Child-1</li>
    <li>Child-2</li>
    <li>Child-3</li>
  </ul>
 </li>
 <li>Parent-2
  <ul>
    <li>Child-4</li>
    <li>Child-5</li>
  </ul>
 </li>
 <li>Parent-3
  <ul>
    <li>Child-6</li>
  </ul>
 </li>
</ul>

而且结果需要像这样内联显示：

父 1 |孩子 1 |孩子 2 |孩子 3 | 父母-2 |孩子 4 |孩子 5 | 父母-3 |孩子 6 岁

您如何在 CSS 中或在 jquery 的帮助下实现这一点？看起来很简单，但我想不通。

【问题讨论】：

你听说过float或inline-block吗？
这就是他/她发布这个问题的原因，我猜......
我认为问题是部分浮动与内联块，但 OP 还需要添加“|”的指导以编程方式显示字符。（我在下面的回答作为纯 CSS 提供了这两个问题的解决方案。
我尝试了浮动和内联块，但没有让它工作。诀窍是在 ul 和 li 上都使用 inline-block，如下图所示，从 draw_w 的答案中可以看出。我只在li上试过。

标签： jquery html css menu

【解决方案1】：

所以这可能不是你想要的，但它应该让你开始。将以下 css 应用到您的 li/ul：

ul, li {
    list-style-type: none;
    display: inline-block;
}

如果你想看到这个工作，请在这里查看：http://jsfiddle.net/Cvf33/

【讨论】：

谢谢！这解决了我的问题。我没有在 ul 元素上放置 inline-block，因此我没有让它工作。
@user3446283 如果这解决了您的问题 - 请随时标记为答案:)

【解决方案2】：

这很容易通过使用display: inline-block; 属性和值来完成。 inline-block 属性告诉元素表现得像一个段落，在一行上从左到右排列，直到没有更多的宽度可用。此时它换行到第二行。

这个效果是通过告诉 UL 元素为inline-block 来实现的，这将所有的 UL 对齐。然后通过将相同的inline-block 应用于 LI 元素，将这些元素在 UL 中从左到右对齐。您可以通过注释掉下面两个选择器中的display: inline-block; 行来查看不同的结果。

Inline-block 是 IE8 并且向前兼容。有关兼容性的详细信息，请参阅此 Can I Use It 链接。

请注意，额外的 CSS（高度和背景）仅用于视觉演示，并不是代码功能的组成部分

Demo JSFiddle

ul {
    display: inline-block;
    height: 40px;
}

ul li { 
    display: inline-block;
    height: 40px;
    background: red;
}

ul li ul.sub-menu li {
    background: blue;
}

【讨论】：

【解决方案3】：

试试这个：

<style>
ul, li {display: inline-block;}
ul, li {margin:0; padding: 0; text-align: left;}
li + li::before {
    content: " | ";
}
ul::before {
    content: " | ";
}
.container::before {
    content: " ";
}
ul li {font-weight: bold;}
ul li ul li {font-weight: normal;}
</style>

<ul class="container">
 <li>Parent-1
  <ul>
    <li>Child-1</li>
    <li>Child-2</li>
    <li>Child-3</li>
  </ul>
 </li>
 <li>Parent-2
  <ul>
    <li>Child-4</li>
    <li>Child-5</li>
  </ul>
 </li>
 <li>Parent-3
  <ul>
    <li>Child-6</li>
  </ul>
 </li>
</ul>

请注意，我给最外层的 ul 赋予了“容器”的类名，以便删除前导的“|”

【讨论】：