Jquery - Меню мыши над на <a> не <a><span>

Question

Я хакерство следующее меню на этой странице: http://cssmenumaker.com/menu/slabbed-accordion-menu

Я хочу, чтобы расширить при наведении курсора мыши, так что я могу иметь ссылку на пункт меню верхнего уровня, а также как расширенные элементы.

У меня есть следующий код в моем скрипте, который работает при наведении и на мобильном телефоне при нажатии.

(function($) { 
$(document).ready(function() { 
$('#cssmenu li.has-sub > a ').on('mouseover', function(){ 
    $(this).removeAttr(''); 
    var element = $(this).parent('li'); 
    if (element.hasClass('open')) { 
     element.removeClass('open'); 
     element.find('li').removeClass('open'); 
     element.find('ul').slideUp(); 
    } 
    else { 
     element.addClass('open'); 
     element.children('ul').slideDown(); 
     element.siblings('li').children('ul').slideUp(); 
     element.siblings('li').removeClass('open'); 
     element.siblings('li').find('li').removeClass('open'); 
     element.siblings('li').find('ul').slideUp(); 
    } 
}); 

Проблема у меня есть, что, когда указатель мыши находится над «li.has-суб а» он расширяется в порядке, но он также вызывает снова, когда «li.has-Sub пролетом» завис над. Как я могу предотвратить включение внутри ссылки, инициируя событие?

Это HTML:

<ul> 
<li><a href='#'><span>Home</span></a></li> 
    <li class='active has-sub'><a href='index.html'><span>Serviced Apartments</span></a> 
    <ul> 
    <li><a href='#'><span>Submenu 1</span></a></li> 
    <li><a href='#'><span>Submenu 2</span></a></li> 
    </ul> 
</li> 
<li><a href='#'><span>Find/Contact Us</span></a></li> 
</ul> 

Любая помощь очень ценится.

Answer 1

я думаю, что проблема заключается в том, как вы определяете уаг элемент, потому что

var element = $(this).parent('li'); 

показывает якорный тег и охватывают оба ребенка из литий так $ (это) может быть определен как «а» и «пролете»

лучшее решение удалить span i не думаю, что они используются

Answer 2

Попробуйте сделать вещи проще для себя, это то, что вы хотели сделать?

http://jsfiddle.net/prn3gtqb/

<ul id="cssmenu"> 
<li><a href='#'><span>Home</span></a></li> 
..</ul>