Выровнять по правому краю "левый треугольник" в элементе меню

Я создаю меню HTML/CSS/JS и хочу, чтобы стрелка вправо указывала, что этот элемент является подменю.

Моя проблема в том, что в треугольнике Firefox (знак "▶" ) отображается на следующей строке вместо текущей строки...

Хром показал оба случая штрафа.

В 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 или аналогичный, используемый с фоновым изображением или чем-то еще, чтобы сделать такой проект, но я не могу точно запомнить, как именно.

Какое обходное решение возможно?

UPDATE Я делаю более полный пример, 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%;
}

Ответ 1

Наконец, я решает проблему:

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

Ответ 1

Ответ 2