Css Vertical Menu Fly Out - css

Question

The submenu of the vertical dropdown portion of my .css-driven menu has an issue. In the jsfiddle example, high lighting 'Bedroom Furniture' under 'Products' displays 'Bunk Beds'. While Bunk Beds' is being displayed, the menu option below (Home Office) isn't selectable (actually, it CAN be selected if the mouse is moved to the far right of Home Office). I've exhausted all of my ideas and any help would be appreciated.
I think the issue is in the 'second level vertical drop down' section of the CSS (CSS snippet...please see jsfiddle example)
.rmenu li ul li:hover ul li a {
/*padding: 0px 0px 0px 33px;*/
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: 175px;
top: -35px;
/* display 3rd level to the right*/
}
/* -- Appearance of second vertical dropdown menu hovered (submenu of first level vertical menu) -- */
.rmenu li ul li:hover ul li:hover a {
color: #000000;
/*hovered text color*/
min-width:100px;
}
/* ----

Answer 1

see the js fiddle : http://jsfiddle.net/mf3y6Lj6/1/
try this :
<div id="header">
<div id="nav">
<ul>
<li>
Menu1
<ul>
<li>submenu
<ul>
<li>sub sub menu</li>
<li>sub sub menu</li>
<li>sub sub menu</li>
<li>sub sub menu</li>
</ul>
</li>
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
</ul>
</li>
<li>
Menu2
</li>
<li>
Menu3
<ul>
<li>submenu</li>
<li>submenu</li>
<li>submenu
<ul>
<li>sub sub menu</li>
<li>sub sub menu</li>
<li>sub sub menu</li>
<li>sub sub menu</li>
</ul>
</li>
</ul>
</li>
<li>
Menu4
</li>
<li>
Menu5
</li>
</ul>
</div>
</div>
ul, li {
margin:0; padding:0; list-style:none; text-decoration:none; color:#fff}
a { text-decoration:none;
color:#fff}
#nav ul {
width:100%;}
#nav ul li {
float:left; padding:0 15px; line-height:40px;}
body {
overflow: hidden;
}
#header {
background: none repeat scroll 0 0 #808080;
box-shadow: 1px 2px 3px #000;
float: left;
height: 50px;
width: 87%;
}
#nav ul li {
float: left;
line-height: 51px;
padding: 0 15px;
}
#nav ul > li:hover {
background-color: #000;
}
#nav ul li > ul {
background-color: #000;
display: none;
position: absolute;
top: 59px;
width: 150px;
}
#nav ul li:hover > ul {
display:block}
#nav ul li > ul > li {
background: none repeat scroll 0 0 #999;
border-bottom: 1px solid;
margin: 0;
padding: 0;
position: relative;
text-align: center;
text-transform: capitalize;
width: 100%;
}
#nav ul li > ul > li > ul {
background: none repeat scroll 0 0 pink;
display: none;
left: 150px;
position: absolute;
text-align: center;
top: 0;
}
#nav ul li > ul > li:hover ul {
display:block}
#nav ul li > ul > li > ul > li {
background: none repeat scroll 0 0 pink;
color: #000;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}