Align to right “left triangle” in menu element

Question

I build HTML/CSS/JS menu and want to align arrow to the right to point that this element is submenu.

My problem that in Firefox triangle ("▶" sign) shown on next line instead of current line...

Chromium shown both cases fine.

There are bugs in BTS that similar to my situation:

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

I try 2 strategy, this my HTML structure:

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

and this my CSS which shown issue:

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

JS Fiddle for playground.

I remember I read code where margin-right: -16px or similar used with background image or something else to make such design but I can't remember exactly how.

What workaround possible?

UPDATE I make 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

getting rid of "white-space: nowrap" helps

Answer 2

Finally I 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>

and:

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

Essential part is to make element with triangle as block and position: relative and reserve space for triangle by padding-right: -1.2em and position triangle by position: absolute after element and move back triangle by margin-left: -1em.