Здравствуйте.
Подскажите как сделать.
Есть правый и левый блок, я сделал их через float left
В левый блок ставлю меню, навожу на меню появляется подменю и это подменю выезжает на правый блок и когда я получается навожу на подменю и при этом навожу на правый блок подменю закрывается, подскажите что делать

_____________
https://t.me/pump_upp

вот код

#left{float: left;width: 300px;}
#right{float: left;width: 665px;margin-left: 15px;background: #000;opacity: 0.9;color: #fff;padding: 20px;}

.sf-menu, .sf-menu * {margin:0;padding:	0;list-style:none;}
.sf-menu {
	line-height:	1.0;
}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			10em; 
}
.sf-menu ul li {
	width:			100%;
}
.sf-menu li:hover {
	visibility:		inherit;
}
.sf-menu li {
	float:			left;
	position:		relative;
}
.sf-menu a {
	display:		block;
	position:		relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0;
	top:			2.5em; 
	z-index:		99;
        position:		absolute;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
        z-index:		99;
        position:		absolute;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:			10em; 
	top:			0;
        position:		absolute;
        z-index:		99;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
        position:		absolute;
        z-index:		99;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			10em; 
	top:			0;
                position:		absolute;

}
.sf-menu a {
	border-left:	1px solid #fff;
	border-top:		1px solid #CFDEFF;
	padding: 		.75em 1em;
	text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  {
	color:			#13a;
}
.sf-menu li {
	background: #000;opacity: 0.9;
}
.sf-menu li li {
	background: #000;opacity: 0.9;
}
.sf-menu li li li {
	background: #000;opacity: 0.9;
}
.sf-menu li:hover, .sf-menu li.sfHover,.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	background: #c1c1c1;opacity: 0.9;
	outline:		0;
}
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			1.05em;
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;
	background:		url('../img/right.gif') no-repeat -10px -100px;
}
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-shadow ul.sf-shadow-off {
	background: transparent;
}
.sf-vertical, .sf-vertical li {
	width:	17em;
}
.sf-vertical li:hover ul,.sf-vertical li.sfHover ul {
	left:	17em;
	top:	0;position: absolute;z-index: 1;}

.sf-vertical a > .sf-sub-indicator { background-position: 0 0; }

<div id="left">
            <div class="left_menu">
                
                        <ul id="sample-menu-3" class="sf-menu sf-vertical">
                            <li class="current">
				<a class="sf-with-ul" href="#a">1</a>
                                    <ul>
					<li class="current">
                                            <a href="#aa">2</a>
					</li>
					<li class="current">
                                            <a class="sf-with-ul" href="#ab">2</a>
						<ul>
                                                    <li class="current"><a href="#">menu item</a></li>
                                                    <li><a href="#aba">menu item</a></li>
						</ul>
					</li>
					<li>
                                            <a class="sf-with-ul" href="#">2</a>
						<ul>
                                                    <li><a href="#">menu item</a></li>
                                                    <li><a href="#">menu item</a></li>
						</ul>
					</li>
                                    </ul>
                            </li>
                            <li>
				<a class="sf-with-ul" href="#">2</a>
                                    <ul>
					<li>
                                            <a class="sf-with-ul" href="#">2tem</a>
						<ul>
                                                    <li><a href="#">menu item</a></li>
                                                    <li><a href="#">menu item</a></li>
						</ul>
					</li>
					<li>
                                            <a class="sf-with-ul" href="#">2</a>
						<ul>
                                                    <li><a href="#">menu item</a></li>
                                                    <li><a href="#">menu item</a></li>
						</ul>
					</li>
                                    </ul>
                            </li>
			</ul>
                    
                
            </div>
        </div>
        <div id="right"> 
            
         
    </div>

_____________
https://t.me/pump_upp