Question

我构建了HTML / CSS / JS菜单，并希望将箭头向右对齐，指出此元素是子菜单。

我的问题是在Firefox三角形（“▶”符号）显示在下一行而不是当前行...

Chromium显示两种情况都很好。

BTS中存在类似于我的情况的错误：

https://bugzilla.mozilla.org/show_bug.cgi?id=488725

我尝试了2个策略，这是我的HTML结构：

<div class="name1">Submenu 1<span class="sub">▶</span></div>
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
<div class="name2">Submenu 2</div>
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>

这是我的CSS显示问题：

a, .name1, .name2 {
  display: block;
  white-space: nowrap;
}
.name1 > .sub {
  float: right;
}
.name2:after {
  content: "▶";
  float: right;
}

JS Fiddle适用于游乐场。

我记得我读过用margin-right: -16px或类似用于背景图片或其他东西的代码来进行此类设计，但我不记得具体如何。

可行的解决方法是什么？

更新我制作more complete example，HTML：

<div class="container">
  Top level menu
  <div class="box">
    <div class="name1">Very long submenu 1<span class="sub">▶</span></div>
    <a href="#">Item 1 1 1</a>
    <a href="#">Item 2</a>
    <div class="name2">Very long submenu 2</div>
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
  </div>
</div>

CSS：

a { border: green 1px dotted; margin: 2px; }
a, .name1, .name2 {
  display: block;
  white-space: nowrap;
}
.name1 > .sub {
  display: inline-block;
  float: right;
}
.name2:after {
  content: "▶";
  float: right;
}

.container {
    display: inline-block;
    background: gold;
    position: relative;
}
.box { display: none; }
.container:hover > .box {
  display: block;
  position: absolute;
  top: 100%;
}

Answer 1

摆脱“white-space：nowrap”帮助

Answer 2

最后我solve problem：

<div class="container">
  Top level menu (hover on me)
  <div class="box">
    <div class="submenu">
      <div class="name">Long submenu 1</div>
      <div class="box">        
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
      </div>
    </div>
    <a href="#">Item 1 1 1</a>
    <a href="#">Item 2</a>
    <div class="submenu">
      <div class="name">Very long submenu 2</div>
      <div class="box">        
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <a href="#">Item 3</a>
      </div>
    </div>
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
  </div>
</div>

和

.container {
    display: inline-block;
    background: gold;
    position: relative;
}
.box { display: none; }
.container:hover > .box {
  display: block;
  position: absolute;
  top: 100%;
}
.container .submenu {
  position: relative;
}
.container .submenu:hover > .box {
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
}

a, .name {
  white-space: nowrap;
  display: block;
}
.name {
  padding-right: 1.2em;
  position: relative;
}
.name:after {
  content: "▶";
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: -1em;
}

基本部分是将带有三角形的元素设为block和position: relative，并为padding-right: -1.2em保留三角形的空间，并在元素后面将三角形设置为position: absolute，然后向后移动三角形margin-left: -1em。

右对齐＆＃34;左三角＆＃34;在菜单元素中

2 个答案: