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

Answer 1

Finally I solve problem:

  Top level menu (hover on me)
  

    

      
Long submenu 1
      
        
        Item 1
        Item 2
      
    
    Item 1 1 1
    Item 2
    

      
Very long submenu 2
      
        
        Item 1
        Item 2
        Item 3
      
    
    Item 1
    Item 2
  

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.