JQuery SlideToggle Background Hover

Question

Хорошо, ребята, я старался, чтобы фон каждого текстового поля скользил позади, чтобы заполнить всю коробку цветом # 0F3 при наведении. Значение между разделителями каждого, но не повезло. Вы можете помочь?

http://jsfiddle.net/jfarr07/hWPAV/3/

HTML

<div id="navigation"> 
<div class="panel"></div> 
    <ul id="nav"> 
     <li class="nav"><a href="#">HOME</a></li> 
     <li class="nav"><a href="#">OUR STORY</a></li> 
     <li class="nav"><a href="#">GALLERY</a></li> 
     <li class="nav"><a href="#">GIFT REGISTRY</a></li> 
    </ul> 
</div> 

CSS

body, html { 
padding:0; 
margin:0; 
background-repeat:none; 
background-image:url(../../Portfolio/images/lyricblast.png); 

} 
a:link { 
text-decoration:none; 
color:#000; 
font-family:open-sans, HelveticaNeue, Helvetica Neue Condensed Bold, Helvetica Neue, serif; 
} 
a:visited { 
color:#000; 
} 
a:hover { 
color:#FFF; 
} 
#navigation { 
width:auto; 
height:30px; 
background:rgba(0, 0, 0, .35); 
padding-top:10px; 
} 
ul#nav { 
display:inline; 
} 
li.nav { 
display:inline-block; 
margin: 0px 0px 0px 30px; 
padding:0px 0px 0px 30px; 
position:relative; 
} 
li~li { 
border-left: 1px solid #000000; 

} 
.panel { 
background:#0F3; 
background-size:100%; 
height:40px; 
display:none; 

} 

JQuery

<script> 
$(document).ready(function() { 
$("li.nav").hover(
function() { 
    $(this).find(".panel").slideToggle("fast"); 
}, 
function() { 
    $(this).find(".panel").slideToggle("fast"); 
} 
); 
}); 

</script> 

Answer 1

Есть несколько вещей, чтобы выправлению здесь:

Ваш код JS является

<script> 
    $(document).ready(function() { 
     $("li.nav").hover(function() { 
      $(this).find(".panel").slideToggle("fast"); 
     },function() { 
      $(this).find(".panel").slideToggle("fast"); 
     }); 
    }); 
</script> 

Здесь hover событие переплетены к элементу li.nav. find внутри li.nav не возвращает элемент, поскольку нет элемента с именем class panel внутри li.nav. Ниже приведен модифицированный код:

<script> 
    $(document).ready(function() { 
     $("li.nav").hover(function() { 
      $("#navigation").find(".panel").stop().slideToggle("fast"); 
     }, function() { 
      $("#navigation").find(".panel").stop().slideToggle("fast"); 
     }); 
    }); 
</script> 

Также я изменил стиль для .panel и сделал его абсолютным.

.panel { 
    position:absolute; 
    background:#0F3; 
    background-size:100%; 
    height:40px; 
    display:none; 
    width:100%; 
    top:0; 
} 

Вот fiddle