Menu (Submenu) Needs To Be Dynamic Instead Of Static - css

Question

I have a purely .css driven menu. Currently, I have the flyout on the sub-sub menu appearing at 180px. This obviously doesn't work because as soon as menu text that exceeds 180px is entered, the submenu text is overlayed with the sub-submenu text (In the example, Highlighting Products > Entertainment Centers USA shows the problem).
The spot in the .css where I have explicitly stated the 180px width is below. I need it to be dynamic, i.e. the desired behavior is for the flyout to align with the right side of the first level vertical menu regardless of the first level submenu's width.
/* -- Appearance of second vertical dropdown menu unhovered (submenu of first level vertical menu) -- */
.rmenu li ul li:hover ul li a {
padding: 0px 0px 0px 5px;
background: #e8dec7; /*background color for submenu hovered text*/
color: #51db29; /* this is the color of the sub-sub menu text. I made the color (#51db29) 'unusual' as an example. Should be changed to something less jarring (of course) */
word-wrap: break-word;
min-width:100px;
position: relative; left: 180px; top: -35px; /* display 3rd level to the right (180px) */ /*left: 180px*/
}
The jfiddle is here:
http://jsfiddle.net/9c8wcxju/4/
Many, many thanks.....

Answer 1

I have simplified everything down and made this for you. You can expand on it and do what you want with it. I couldn't really work with yours, ended up deleting most of the css.
As you can see I have added class to each level of the sub-menu so it is easier to target. What I have created is what I think you wanted, I hope this puts you on the right track.
http://jsfiddle.net/9c8wcxju/5/
.rmenu ul li {
margin: 0;
padding: 0;
position: relative;
}
.rmenu ul {
list-style-type:none;
margin:0;
padding:0;
}
.rmenu li a {
display:block;
min-height: 35px;
line-height: 35px;
font-family: "Arial", sans-serif;
font-size: 18px;
color: #000000;
background-color: #e8dec7;
text-decoration: none;
white-space: nowrap;
}
.rmenu li:hover a {
background: #d6cbb0;
}
.rmenu .hidden {
display: none;
}
.rmenu .level_1 > li {
float: left;
}
.rmenu .level_1 > li a {
padding: 0 10px;
}
.level_1 > li:hover .level_2,
.level_2 > li:hover .level_3 {
display: block;
}
.level_2 {
position: absolute;
left: 0;
}
.level_3 {
position: absolute;
top: 0;
left: 100%;
}