Drop Down Menu For Wordpress (Work In Progress)

This is a wordpress 3.0 + menu only may be converted but you need to look and add your own code for other systems check out the complete write up here http://stackoverflow.com/questions/5839623/mouseover-remove-class-mouseout-restore-class/5844923#5844923

by 규연 황

HTML

<div id="navigation">
        <ul id="navbar">
            <li class="not-active"><a href="#">Main 1</a></li>
            <li class="active active-menu"><a href="#">Main 2</a>
                <ul class="sub-menu">
                    <li class="child-menu first-child"><a href="#">Sub 1</a></li>
                    <li class="child-menu"><a href="#">Sub 2</a></li>
                    <li class="child-menu last-child"><a href="#">Sub 3</a></li>
                </ul>
            </li>
            <li class="not-active"><a href="#">Main 3</a></li>
            <li class="not-active"><a href="#">Main 4</a>
                <ul class="sub-menu">
                    <li class="child-menu first-child"><a href="#">Sub 4</a></li>
                    <li class="child-menu"><a href="#">Sub 5</a></li>
                    <li class="child-menu last-child"><a href="#">Sub 6</a></li>
                </ul>
            </li>
        </ul>
    </div>

CSS

/*Main position of menu*/
#navigation{float: left; margin: 5px 0 15px; padding: 0; position: relative;  width: 100%}
/*First UL tag for menu*/
ul#navbar{margin: 0; padding: 0; font-size: 96%; height: 20px; background: #009AD9}
/*Sets style for each LI tag and sets effects*/
#navbar li{float: left; list-style: none; text-transform: uppercase; font-weight: bold}
#navbar li a{display: block; text-decoration: none; color: #fff; padding: .24em .8em; line-height: normal}
#navbar li:hover a:hover, #navbar li a.hilite{background: #fff; color: #000}
#navbar li.active-menu a{background: #fff; border-top: 2px solid #B70F0F; padding-top: .063em; color: #666}
/*Sets parent active when child is active*/
#navbar li.parent-active a{background: #fff; color: #666}
/*Sets child-menu to not display when not-active*/
ul.sub-menu{display: none}
/*Sets the position of child menu using first-child (leave to avoid conflict with other style's)*/
#navbar li ul.sub-menu li.first-child{margin-left: -0.375em}
/*Sets child as visible on parent hover*/
#navbar li:hover ul.sub-menu{display: inline; left: 0; margin: 0; padding: 0;width: 980px; position: absolute}
/*Sets child as visible when parent is active menu*/
#navbar li.active-menu ul.sub-menu{display: inline; left: 0; margin: 0; padding: 0;width: 980px; position: absolute}
/*Sets child menu active when active item is inside of child menu*/
ul.child-active{display: inline; left: 0; margin: 0 0 0 .375em; padding: 0; position: absolute}
/*Sets style of child links*/
#navbar li ul.sub-menu li a{display: block; text-decoration: none; padding: 0 .5em; line-height: normal}
/*Sets various child link styles*/
ul.sub-menu li a{color: #666!important}
ul.sub-menu li a:hover{color: #000!important}
li.active-menu ul.sub-menu a{border-top: none!important; padding: 0 .5em!important}
#navbar li.current-menu-parent:hover ul.sub-menu{display: inline; left: 0; margin: 0 0 0 .375em; padding: 0; position: absolute}

JavaScript

/*WORDPRESS USERS ONLY*/
/*Adds .not-active class to all parent & non-parent items*/
$('*:not(li) > ul#navbar > li').addClass('not-active');
/*Adds .child-item to all sub-menu items*/
$("ul.sub-menu").children().addClass('child-item');
/*Adds .first-child to all first child items in each sub-menu items (For Styling Only)*/
$('#navbar ul.sub-menu :first-child').addClass('first-child');
/*Adds .last-child to all last child items in each sub-menu items (For Styling Only)*/
$('#navbar ul.sub-menu :last-child').addClass('last-child');
/*Toggles off .not-active class on the current .active class*/
$("#navbar li.active").toggleClass("not-active");
/*Toggles off .not-active class on the current .active child class*/
$('#navbar ul.sub-menu li.active').toggleClass("not-active");
/*Adds .parent-active if .current-menu-class is present*/
$('ul#navbar li.current-menu-parent').addClass('parent-active');
/*Adds .child-active if .current-menu-class is present on parent*/
$('ul#navbar li.current-menu-parent ul.sub-menu').addClass('child-active');
/*Adds hover effect on parent items when hovering child items then removes when no longer hovering*/    
$('#navbar li').hover(
    function() {
        $(this).parents('li').children('a').addClass('hilite');
    },
    function(){
        $(this).parents('li').children('a').removeClass('hilite');
    }
);
/*Removes .active class from the current active class when hover other items but will remain when hovering overself*/
$('#navbar li.not-active').hover(
    function() {
        $('#navbar .active').removeClass('active-menu');
        $('#navbar li.current-menu-parent, #navbar li.current-menu-parent ul.sub-menu').removeClass('parent-active child-active');
       },
    function() {
        $('#navbar .active').addClass('active-menu');
        $('#navbar li.current-menu-parent, #navbar li.current-menu-parent ul.sub-menu').addClass('parent-active child-active');
    }
);