залипает выпадающее меню

[itspider]

Помогите разобраться, никак не вьеду.

При переходе с одного пункта меню на другой залипает выпадающее меню и дергается туда сюда.

html

<div id="fdw">

<!--nav-->

<nav>

<ul>

<li><a href="">Клуб</a>

<ul style="display: none;" class="sub_menu">

<li class="arrow_top"></li>

<li><a href="">О нас</a></li>

<li><a href="">Инфроструктура</a></li>

<li><a href="">Партнеры</a></li>

<li><a href="">Спонсоры</a></li>

</ul>

</li>

<li>

<a href="">услуги</a>

<ul style="display: none;" class="sub_menu">

<li class="arrow_top"></li>

<li><a href="">постой лошадей</a></li>

<li><a href="">аренда лошадей</a></li>

<li><a href="">продажа лошадей</a></li>

<li><a href="">конореревозки</a></li>

<li><a href="">фотосессия с лошадьми</a></li>

<li><a href="">ландшафтные работы</a></li>

</ul>

</li>

<li>

<a href="">конный спорт</a>

<ul style="display: none;" class="sub_menu">

<li class="arrow_top"></li>

<li><a href="">Выездка</a></li>

<li><a href="">Конкур</a></li>

<li><a href="">Соревнования</a></li>

<li><a href="">Результаты соревнований</a></li>

</ul>

</li>

<li>

<a href="">сдюшор</a>

<ul style="display: none;" class="sub_menu">

<li class="arrow_top"></li>

<li><a href="">Обучение</a></li>

<li><a href="">Соревнования</a></li>

<li><a href="">Тренеры</a></li>

<li><a href="">Запись</a></li>

</ul>

</li>

<li>

<a href="">обучение</a>

<ul style="display: none;" class="sub_menu">

<li class="arrow_top"></li>

<li><a href="">верховая езда</a></li>

<li><a href="">индивидуальные занятия</a></li>

<li><a href="">групповые занятия</a>

</li><li><a href="">запись</a></li>

</ul>

</li>

<li>

<a href="">пони-клуб</a>

<ul style="display: none;" class="sub_menu">

<li class="arrow_top"></li>

<li><a href="">обучение</a></li>

<li><a href="">мероприятия</a></li>

<li><a href="">катание</a>

</li><li><a href="">запись</a></li>

</ul>

</li>

<li><a href="">иппотерапия</a></li>

<li><a href="">отдых</a>

<ul style="display: none;" class="sub_menu">

<li class="arrow_top"></li>

<li><a href="">каток и ледяная горка</a></li>

<li><a href="">детские праздники</a></li>

<li><a href="">корпоративный отдых</a></li>

<li><a href="">аренда чайного домика</a></li>

<li><a href="">рыбалка</a></li>

<li><a href="">арбалетная поляна</a></li>

</ul>

</li>

<li><a href="">галерея</a></li>

<li><a href="">контакты</a></li>

</ul>

</nav>

</div><!-- end fdw -->

css

#fdw nav select {

display:none; /* this is just for the mobile display */

}

#fdw nav ul {

display:block;

z-index:999999;

text-align: center;

}

#fdw nav ul li {

display:inline-block;

padding:3px 10px 3px;

/*margin-left:30px;*/

position:relative;

}

#fdw nav ul li a:link, #fdw nav ul li a:visited {

color:#FFF;

/*font:normal 20px 'Yanone Kaffeesatz', sans-serif;*/

text-transform:uppercase;

display:inline-block;

position:relative;

font-size: 20px;

}

#fdw nav ul li a:hover, #fdw nav ul li a:active {

color:#ef6f53;

text-decoration:none;

}

/*#fdw nav ul li span {

position:absolute;

right:-12px;

bottom:6px;

width:7px;

height:8px;

margin:0 0 0 3px;

float:right;

display:block;

background:url('../images/nav_arrow.png') no-repeat left -8px;

font:0/0 a;

}*/

/*#fdw nav ul li.current {

border-bottom:2px solid #e25d29;

}

#fdw nav ul li.current a {

color:#e25d29;

cursor: default;

}

#fdw nav ul li.current a span {

background:url('../images/nav_arrow.png') no-repeat left 0;

}

#fdw nav ul li.current ul li a {

cursor:pointer;

}*/

/*===== sub_menu Style =======*/

#fdw nav ul li ul.sub_menu {

position:absolute;

top:35px;

left:0;

margin:0;

padding:0;

background:#fff;

border:1px solid #ececec;

border-top:5px solid #e25d29;

display:none;

z-index:999999;

-moz-box-shadow: 0px 6px 7px #121012;

-webkit-box-shadow: 0px 6px 7px #121012;

box-shadow: 0px 6px 7px #121012;

}

#fdw nav ul li ul.sub_menu li.arrow_top {

position:absolute;

top:-12px;

left:12px;

width:13px;

height:8px;

display:block;

border:none;

background:url('../images/arrow_top.png') no-repeat left top;

}

#fdw nav ul li ul.sub_menu li {

float:none;

margin:0;

padding:0;

border-bottom:1px solid #ececec;

}

#fdw nav ul li ul.sub_menu li a {

white-space: nowrap;

width: 200px;

padding:12px;

/*font:13px Arial, tahoma, sans-serif;*/

/*text-transform:capitalize;*/

color:#FFF;

text-transform:uppercase;

font-size: 13px;

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQxNGYyYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iIzQxNGYyYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzk1Yjc1ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iIzQxNGYyYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MTRmMmEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(left, #414f2a 0%, #414f2a 20%, #95b75f 50%, #414f2a 80%, #414f2a 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#414f2a), color-stop(20%,#414f2a), color-stop(50%,#95b75f), color-stop(80%,#414f2a), color-stop(100%,#414f2a)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(left, #414f2a 0%,#414f2a 20%,#95b75f 50%,#414f2a 80%,#414f2a 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(left, #414f2a 0%,#414f2a 20%,#95b75f 50%,#414f2a 80%,#414f2a 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(left, #414f2a 0%,#414f2a 20%,#95b75f 50%,#414f2a 80%,#414f2a 100%); /* IE10+ */

background: linear-gradient(to right, #414f2a 0%,#414f2a 20%,#95b75f 50%,#414f2a 80%,#414f2a 100%); /* W3C */

}

#fdw nav ul li ul.sub_menu li a:hover {

/*background:#f9f9f9;*/

color:#ef6f53;

background: #414f2a; /* Old browsers */

/* IE9 SVG, needs conditional override of 'filter' to 'none' */

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQxNGYyYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzk1Yjc1ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MTRmMmEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(left, #414f2a 0%, #95b75f 50%, #414f2a 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#414f2a), color-stop(50%,#95b75f), color-stop(100%,#414f2a)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(left, #414f2a 0%,#95b75f 50%,#414f2a 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(left, #414f2a 0%,#95b75f 50%,#414f2a 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(left, #414f2a 0%,#95b75f 50%,#414f2a 100%); /* IE10+ */

background: linear-gradient(to right, #414f2a 0%,#95b75f 50%,#414f2a 100%); /* W3C */

/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#414f2a', endColorstr='#414f2a',GradientType=1 );*/ /* IE6-8 */

}

#fdw nav ul li ul.sub_menu li a.subCurrent {

color:#e25d29;

cursor:default;

}

#fdw nav ul li ul.sub_menu li a.subCurrent:hover {

background:none;

}

/*===================== end Header style ======================*/

@media only screen and (min-width: 768px) and (max-width: 959px) {

/* nav */

#fdw nav ul li{

margin-left:12px;

}

}

/* All Mobile Sizes (devices and browser) */

@media only screen and (max-width: 767px) {

/* nav menu ul & select */

#fdw nav ul {

display:none;

}

#fdw nav select {

width:100%;

display:block;

margin-bottom:30px;

cursor:pointer;

padding:6px;

background:#f9f9f9;

border:1px solid #e3e3e3;

color:#777;

}

}

js

// building select nav for mobile width only

$(function(){

// building select menu

$('<select />').appendTo('nav');

/*// building an option for select menu

$('<option />', {

'selected': 'selected',

'value' : '',

'text': 'Choise Page...'

}).appendTo('nav select');*/

$('nav ul li a').each(function(){

var target = $(this);

$('<option />', {

'value' : target.attr('href'),

'text': target.text()

}).appendTo('nav select');

});

// on clicking on link

$('nav select').on('change',function(){

window.location = $(this).find('option:selected').val();

});

});

//end

// show and hide sub menu

$(function(){

$('nav ul li').hover(

function () {

//show its submenu

$('ul', this).slideDown(150);

},

function () {

//hide its submenu

$('ul', this).slideUp(150);

}

);

});

//end

[npofopr]

Размещайте пожалуйста код на jsfiddle.net или любом другом похожем месте

[itspider]

выложил http://jsfiddle.net/7pabv/

Edited January 22, 2013 by itspider