jquery - vertikales accordion menue ul li ohne dropdown

Hallo Liebe Freunde des jquery-codings,
wäre super wenn mir jemand helfen könnte:
Habe alles soweit probiert, komme aber leider nicht weiter:
Das auf- und zuklappen des vertikalen Menues mittels accordion-effekt funktioniert soweit, jedoch passiert es immer wieder, dass beim ersten mal mir die Listenelemente dazwischenfunken und so ein
unschöner "hover"-Effekt entsteht, den ich einfach nicht wegbekomme.
Anzusehen ist das ganze unter http://www.eleganz.maklerhomepage24.de/vergleiche.html

Hier mein javascript-Code (im Template unter "eigener Javascript-Code" eingebunden):

Code:

---

<script type="text/javascript">
( function( $ ) {
$( document ).ready(function() {
$('#submenu > ul > li > a ').mouseenter(function() {
  var checkElement = $(this).next();
  $('#submenu li').removeClass('active');
  $(this).closest('li').addClass('active');

  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('slow');
  }


  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#submenu ul ul:visible').slideUp('slow');
    checkElement.slideDown('slow');
  }
  if (checkElement.is('ul')) {
    return false;
  } else {
    return true;
  }               
});
});
} )( jQuery );
</script>

---

hier mein HTML - Code:

HTML-Code:

---

nav id="submenu" class="mod_navigation block">
<ul class="vlist level_1">
<li class="submenu noborder_left first">
<a class="submenu noborder_left first" title="Haus und Wohnung" href="haus-und-wohnung.html">Haus und Wohnung</a>
<ul class="vlist level_2" style="display: block;">
</li>
<li class="submenu noborder_left">
<a class="submenu noborder_left" title="Gesundheit und Risiko" href="gesundheit-und-risiko.html">Gesundheit und Risiko</a>
<ul class="vlist level_2" style="">
</li>
<li class="submenu noborder_left">
<li class="submenu noborder_left">
<li class="submenu noborder_left">
<li class="submenu noborder_left">
<li class="submenu noborder_left last">
</ul>
</nav>

---

die entsprechenden CSS-Anweisungen:

Code:

---

#submenu {/*margin-bottom: 25px; margin-top: 180px; position: fixed; margin-bottom: 25px; */
    margin-top: 25px;
    max-width: 80%;
    position: relative;
        min-height: 800px;
        height: 100%
        }
       
/*#submenu a {display: block; padding: 4px 10px; margin-bottom: 0; -webkit-transition: All 0.1s ease; -moz-transition: All 0.1s ease; -o-transition: All 0.1s ease; -ms-transition: All 0.1s ease; transition: All 0.1s ease;} */
#submenu a {
display: table;
padding: 4px 10px;
margin-bottom: 0;
    -webkit-transition: all .25s ease;
      -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
            transition: all .25s ease;
/*background: #072540; */
color: #fff;
text-decoration: none;
}

/* neu */
#submenu ul li a {
        display: table;
  margin-top: 1px;
  /*padding: 14px 10px;*/
  width: 100%;
  /*background: #337D88;*/
  text-decoration: none;
  text-align: left;
  vertical-align: middle;
  color: #fff;
  overflow: hidden;
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: ease-out;
  transition-property: background;
  transition-duration: 0.4s;
  transition-timing-function: ease-out;
}


#submenu li ul li {border: 0;}
#submenu ul ul {margin-left: /*12px;*/0;}

/*#submenu a:hover, #submenu a.active {color: #0093B5; background: #f8f8f8; margin-left: 4px;}*/
/*#submenu a:hover {
color: #fff; background: #50a0bf; /*margin-left: 4px;*/
#submenu > li:hover li a {
  display: table;
  margin-top: 1px;
  padding: 10px;
  width: 100%;
  height: 1em;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}

#submenu > li:hover li a:hover {
  background: #A4CAC8;
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-property: background;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

}

/* neu - 30-07-2015 - accordion menue
#submenu li.submenu.first{
        height: 0;
    overflow: hidden;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

#submenu ul ul li:target > .submenu.first{ height: 120px;}
---------------------- http://designmodo.com/css3-accordion-menu/ */



#submenu a.active {
color: #fff; background: #50a0bf; /*margin-left: 4px;*/
}

#submenu a.active.trail {background: inherit; color: inherit;}
/* 1. Ebene */
#submenu ul.vlist.level_1 { visibility:visible; opacity:1; transition-delay:5s; }


#submenu li.submenu.first { padding: 0; background: #072540;
 
}

#submenu li.trail.first { background-color: #072540; /*font-size: 12px; */
/* Minimale Höhe - entsprechend ändern
min-height: 300px;
height: 100%; */
 }
 
/* 1. Ebene - weitere Punkte */
#submenu li.noborder_left { background-color: #072540;
/*font-size: 12px; */
 }
 
#subemnu li .noborder_left a {
        display: table;
  /*margin-top: 0;
  padding: 0 10px;
  height: 0;*/
  background: #C6DDD9;
  color: #1F3D39;
  width: 100%;
  height: 1em;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-in;
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-in;
 }
/* 1. Ebene - Ende */

/* 2. Ebene */
#submenu ul ul li {padding: 0; background: #5C768E; font-size: 12px;
  display: table;
  margin-top: 1px;
  width: 100%;
  height: 1em;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-in;
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-in;
  /*position: absolute;
  z-index: -1;*/
}

#submenu li.submenu.noborder_left_2.last { padding: 0; background: #072540;
display: table;
  margin-top: 1px;
  width: 100%;
  height: 1em;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
/* 2. Ebene - Ende */

/*#submenu ul li:hover > ul { display: block; /*height: auto;*/
/*
 } */
 
#submenu ul li.active > ul, #submenu ul li.trail > ul {display: block; /*height: auto;*/ width: 250px; max-width: 100%;}
#submenu ul ul {display: none;
/* neu
position: absolute;
height: auto;
overflow: hidden; */
/*display: table;
  margin-top: 1px;
  width: 100%;
  height: 1em;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-out; */
}

#submenu ul ul ul {display: none;}
#submenu ul ul ul ul {display: none;}

/* hover */

#submenu a:hover {
color: #fff; background: #50a0bf; /*margin-left: 4px;*/
display: table;
  margin-top: 1px;
  width: 100%;
  height: 1em;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}

#submenu a.active {
color: #fff; background: #50a0bf; /*margin-left: 4px;*/
}

---

Vielen Dank für Eure Hilfe.