Basic Hover Nav

by ashleycam3ron

HTML

<div class="menu"><ul><li class="page_item page-item-6"><a href="http://test.minnowhost.com/fallbrookusa/fallbrook-living/" title="Fallbrook Living">Fallbrook Living</a><ul class='children'><li class="page_item page-item-50"><a href="http://test.minnowhost.com/fallbrookusa/fallbrook-living/vision/" title="Vision">Vision</a><ul class='children'><li class="page_item page-item-199"><a href="http://test.minnowhost.com/fallbrookusa/fallbrook-living/vision/new-urbanism/" title="New Urbanism">New Urbanism</a></li><li class="page_item page-item-201"><a href="http://test.minnowhost.com/fallbrookusa/fallbrook-living/vision/environmental-stewardship/" title="Environmental Stewardship">Environmental Stewardship</a></li><li class="page_item page-item-203"><a href="http://test.minnowhost.com/fallbrookusa/fallbrook-living/vision/architecture/" title="Architecture">Architecture</a></li></ul></li><li class="page_item page-item-52"><a href="http://test.minnowhost.com/fallbrookusa/fallbrook-living/community/" title="Community">Community</a></li><li class="page_item page-item-54"><a href="http://test.minnowhost.com/fallbrookusa/fallbrook-living/lincoln/" title="Lincoln">Lincoln</a><ul class='children'><li class="page_item page-item-205"><a href="http://test.minnowhost.com/fallbrookusa/fallbrook-living/lincoln/helpful-links/" title="Helpful Links">Helpful Links</a></li></ul></li><li class="page_item page-item-56"><a href="http://test.minnowhost.com/fallbrookusa/fallbrook-living/fallbrook-at-a-glance/" title="Fallbrook At-A-Glance">Fallbrook At-A-Glance</a></li></ul></li><li class="page_item page-item-7 current_page_item"><a href="http://test.minnowhost.com/fallbrookusa/residences/" title="Residences">Residences</a><ul class='children'><li class="page_item page-item-111"><a href="http://test.minnowhost.com/fallbrookusa/residences/buy-a-home/" title="Buy A Home">Buy A Home</a><ul class='children'><li class="page_item page-item-195"><a...

CSS

html {background:black;}

.menu {width:900px;margin:0px auto;}
.menu ul {padding-top: 8px;}
.menu > ul > li {list-style:none; padding:0 22px;float:left; height:30px;}
.menu > ul > li:last-child {padding:0 0 0 22px;}
.menu > ul > li:hover > a, .menu > ul > li:focus > a, .menu > ul > li.current_page_item > a {background:url(images/arrow.png) no-repeat bottom center;color:#cf744a;}
.menu ul > li a { text-decoration:none;color:#f2e9da; font-size:16px;font-family: 'Dutch801ItHdBTItalic'; letter-spacing:.1em;padding-bottom: 7px;}
.menu ul li > ul {display:none;position:absolute; z-index:1;padding:0 20px 0 0;margin-top: 12px; width:auto; margin-left:-30px;background:url(images/bg_white.png);
    -moz-box-shadow: 0px 0px 7px #777; 
    -webkit-box-shadow: 0px 0px 7px #777; 
    box-shadow: 0px 0px 7px #777;}
.menu ul li a:hover, .menu ul li a:focus {color:#cf744a;}
.menu ul li ul li {display:block;clear:left;float:left;border-bottom:thin solid #e5dac9; width:100%;padding:3px 10px;text-align: center; }
.menu ul li ul > li:first-child {background:#cf744a;color:white;margin-top: -6px;}
.menu ul li ul > li a{color:#7e654c;font-family: 'Dutch801Roman'; font-size:12px;text-align:center; }
.menu ul li ul > li:first-child a {color:white;}
.menu ul li ul > li:last-child {border:0;}

.menu ul li.page-item-9 ul {margin-left:-55px;}
.menu ul li ul li ul, .menu ul li ul li ul li {background: url(images/bullet.png) no-repeat 0 5px;border-right:0;}

.menu {width:100%;position:relative;}
.menu ul {padding-top: 8px;width: 900px;margin:0px auto;}
.menu > ul > li {list-style:none; padding:0 22px;float:left; height:30px;}
.menu > ul > li:last-child {padding:0 0 0 22px;}
.menu > ul > li:hover > a, .menu > ul > li:focus > a {color:#cf744a;}
.menu ul li a { text-decoration:none;color:#f2e9da; font-size:16px;font-family: 'Dutch801ItHdBTItalic'; letter-spacing:.1em;padding-bottom: 7px;}
.menu ul li a:hover, .menu ul li a:focus {color:#cf744a;}
.menu ul li ul {display:none;margin: 6px 0 0...

JavaScript

$('.menu > ul > li').not('.menu ul li.current_page_item, .menu ul li.current_page_ancestor').hover(
                function() {
                    $(this).children().dequeue().stop().fadeIn(200);
                    $('.menu ul li.current_page_item ul, .menu ul li.current_page_ancestor ul').css({display: "none"})
                }, function() {
                    $('.menu ul li.current_page_item ul, .menu ul li.current_page_ancestor ul').css({display: "block"})
                    $(this).children("ul").dequeue().stop().fadeOut();
                }
            );