ทำเมนู css เมื่อเอาเมาส์วาง ไปชนอันอื่นขยับ ไม่ทราบว่าต้องปรับอย่างไง (มีรูป)

<style type="text/css">
/* ^^^^^^^^ BELOW IS THE CODE FOR THE MENU ^^^^^^^^^^ */
#tabs31{position:relative;display:block;height:39px;font-size:13px;font-weight:bold;background:transparent url(images/bgOFF1.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;border-top:4px solid #B30000;}
#tabs31 ul{margin:0;padding:0;list-style-type:none;width:auto;}
#tabs31 ul li{display:block;float:left;margin:0;}
#tabs31 ul li a{display:block;float:left;color:#666;text-decoration:none;padding:11px 20px 0 20px;height:23px;background:transparent url(images/bgDIVIDER1.gif) no-repeat top right;}
#tabs31 ul li a:hover,#tabs31 ul li a.current{color:#B30000;background:#fff url(images/bgON1.gif) no-repeat top right;}
#tabs31  li ul li{ /* กำหนดรูปแบบให้กับเมนูย่อย */  
    /* position:absolute; */
	z-index:2;   /* เพิ่ม */
	display:block;  
    background:transparent url(images/bgDIVIDER1.gif) no-repeat top right;
    border:1px #F4F4F4 solid;  
    float:left;  
    text-align:left;  
}  
#tabs31  li ul li:hover{ /* กำหนดรูปแบบให้กับเมนูย่อยเมื่อเมาส์อยู่เหนือ */  
    z-index: 2;   /* เพิ่ม */
	display:block;  
    background:transparent url(images/bgDIVIDER1.gif) no-repeat top right; /* สีพื้นหลังเมนูย่อ */ 
    border:1px #F4F4F4 solid;  
    float:left;  
    text-align:left;  

}  
#tabs31  li:hover  ul {   
    display:block;  
    width:120px; 
		}
#tabs31 li ul{   
    display:none;  
    list-style:none;  
    margin:0px;  
    padding:0px;  
}  
/* 
</style>