Align to right "left triangle" in menu element - html

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>
Item 1
Item 2
<div class="name2">Submenu 2</div>
Item 1
Item 2
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>
Item 1 1 1
Item 2
<div class="name2">Very long submenu 2</div>
Item 1
Item 2
</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">
Item 1
Item 2
</div>
</div>
Item 1 1 1
Item 2
<div class="submenu">
<div class="name">Very long submenu 2</div>
<div class="box">
Item 1
Item 2
Item 3
</div>
</div>
Item 1
Item 2
</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.