마우스 오버할때 배경과 메뉴명이 바뀌는 메뉴를 만들어보자.

<nav>

<ul>

<li><a href="">Description</a></li>

<li><a href="">A. Hover Menu</a></li>

<li><a href="">B. ScrollMove Menu</a></li>

<li><a href="">C. Slide Banner</a></li>

<li><a href="">D. Fade Banner</a></li>

<li><a href="">E. SNS Move List Gellay</a></li>

<li><a href="">F. Wing banner</a></li>

<li><a href="">G. Layout Popup</a></li>

</ul>

</nav>

<script src="//code.jquery.com/jquery.min.js"></script>

<script>

$(function(){

// A hover menu

 $("nav>ul>li").hover(function(){

 $(this).find('a').css({'color':'#0042a4','font-weight':'600'})

 },function(){

 $(this).find('a').css('color','#000')

 });

 $("nav>ul>li").hover(function(){

 $(this).css('background-color','#fff')

 },function(){

 $(this).css('background-color','#ccc')

 });

});

</script>