закрыть подменю при наведении на другое меню

Question

У меня есть меню с подменю внутри. Когда вы наводите курсор на главное меню, открывается подменю. когда вы нажимаете на подменю, подменю остается открытым, потому что ему присваивается класс «включено». Я хочу, чтобы пользователь зависал над другим разделом главного меню, подменю закрывается на нижнем и открывается на том, на котором они парят.

<div class="sideMenu2"> 
    <ul> 
     <li><a href>retail</a> 
      <ul class="subsideMenu2"> 
       <li><a href="/portfolio/8/0">the elements</a></li> 
       <li><a href="/portfolio/9/0">bullring</a></li> 
       <li><a href="/portfolio/10/0">braehead</a></li> 
      </ul> 
     </li> 
     <li ><a href class="on">sports &amp; leisure</a> 
       <ul class="subsideMenu2"> 
         <li class= "on"><a href="/portfolio/19/0">the rose bowl</a></li> 
          <li><a href="/portfolio/48/0">alton towers pool</a></li> 
       </ul> 
     </li></ul> 

CSS:

.sideMenu ul li.on a 
{ 
    height:2em; 
    padding-top: 2px; 
    background:url(../images/point.png) no-repeat; 
    font-weight:bold; 
} 

.sideMenu ul 
{  
    padding: 15px 0px 0px 0px; 
    list-style-type:none; 
    font-size:1em; 
    width:20em; 
    color:#fff; 
    margin-left:-10px; 
} 

.sideMenu ul a{ 
    padding: 2px 20px 0px 0px; 
    color:#fff; 
    text-decoration:none; 
    float:left; 
    width:19.2em; 
} 

.sideMenu li a 
{ 
    height:2em; 
    padding-top: 1px; 
    padding-left:15px; 
} 

.sideMenu li a:hover{ 
    background:url(../images/point.png) no-repeat; 
    cursor:pointer; 
    padding-left:-15px; 
} 

.sideMenu h4{ 
    display:none; 
} 

.sideMenu2 ul li.on a 
{ 
    height:2em; 
    padding-top: 2px; 
/** font-weight:bold; **/ 
} 

a.on 
{  
    background:url(../images/point.png) no-repeat; 
} 

.sideMenu2 ul 
{  
    padding: 15px 0px 0px 0px; 
    list-style-type:none; 
    font-size:1.1em; 

    color:#fff; 
    margin-left:-10px; 
} 

.sideMenu2 ul a{ 
    padding: 2px 20px 0px 0px; 
    color:#fff; 
    text-decoration:none; 
    float:left; 
    width:16.6em; 
} 

.sideMenu2 li a 
{ 
    height:2em; 
    padding-top: 1px; 
    padding-left:15px; 
} 

.sideMenu2 li a:hover{ 
    background:url(../images/point.png) no-repeat; 
    cursor:pointer; 
    padding-left:-15px; 

} 

.sideMenu2 ul ul 
{  
    display:none; 
} 
.sideMenu2 li:hover .subsideMenu2 { 
    display: block; 
} 

.sideMenu2 li .subsideMenu2 { 
    padding: 15px 0px 0px 20px; 
    list-style-type:none; 
    font-size:0.8em; 
    width:20em; 
    color:#fff; 
    margin-left:-10px; 
} 

.sideMenu2 li .subsideMenu2 li.on a 
{ 
    height:2em; 
    padding-top: 2px; 
    background:url(../images/point.png) no-repeat; 
/** font-weight:bold;**/  
    display:block; 
} 

http://jsfiddle.net/uzi002/LSZBg/9/

Answer 1

Вам нужно убедиться, что вашим пунктам меню присвоен класс. Вместо того чтобы использовать .sideMenu ul li, просто использовать li.main_menu_item или что-то:

$(function() { 
    $('li.main_menu_item').hover(function() { 
     // Hide all open sub-menus 
     $('li.main_menu_item').removeClass('on'); 

     // Show only this menu item's sub-menu 
     $(this).addClass('on'); 
    }); 
}); 

Answer 2

вы можете связать событие парения с функцией, которая петлями по всем пунктам, которые имеют «на» класса и удалить его с JQuery и вы может установить текущий элемент hover с помощью этого «объекта», чтобы установить его в «on», если вы разместили javascript, который вы использовали для этого меню, я могу вам помочь, или вы можете поместить образец кода на скрипач