HorizontalMenu1JS

For WAC

HTML

<div class="maincontainer">
    <div id="becomemembercontainer">
        <div id="becomemember"><span id="becomemembertext">BECOME A MEMBER</span></div>
        <div id="becomemember1"><span id="becomemembertext1">SUBLINK 1</span></div>
        <div id="becomemember2"><span id="becomemembertext2">SUBLINK 2</span></div>
    </div>
    <div id="profdevcontainer">
        <div id="profdev"><span id="profdevtext">PROFESSIONAL DEVELOPMENT</span></div>
        <div id="profdev1"><span id="profdevtext1">SUBLINK 1</span></div>
        <div id="profdev2"><span id="profdevtext2">SUBLINK 2</span></div>
    </div>
</div>

CSS

.maincontainer {
width: 1005px;
height: 60px;
background-color: red;
overflow: hidden;
}

#becomemembercontainer {
width: 170px;
height: 60px;
background-color: black;
float: left;
margin-right: 3px;
}

// #becomemembercontainer:hover {
width: 1005px;
height: 60px;
background-color: black;
float: left;
position: absolute;
z-index: 99;
margin-right: 3px;
}

#becomemember {
width: 170px;
height: 60px;
background-color: green;
text-align: center;
line-height: 60px;
padding: 0px;
margin-right: 3px;
float: left;
}

#becomemembertext {
font-size: 16px;
}

#becomemember1 {
width: 100px;
height: 60px;
background-color: green;
text-align: center;
line-height: 60px;
padding: 0px;
margin-right: 3px;
float: left;
}

#becomemembertext1 {
font-size: 16px;
}

#becomemember2 {
width: 100px;
height: 60px;
background-color: green;
text-align: center;
line-height: 60px;
padding: 0px;
margin-right: 3px;
float: left;
}

#becomemembertext2 {
font-size: 16px;
}

#home {
width: 100px;
height: 60px;
background-color: gray;
text-align: center;
line-height: 60px;
padding: 0px 0px 0px 0px;
margin-right: 3px;
float: left;
}

#hometext {
font-size: 16px;
}

#profdevcontainer {
width: 250px;
height: 60px;
background-color: yellow;
float: left;
margin-right: 3px;
}

#profdevcontainer:hover {
width: 1005px;
height: 60px;
background-color: yellow;
float: left;
position: absolute;
z-index: 99;
margin-right: 3px;
}

#profdev {
width: 250px;
height: 60px;
background-color: blue;
text-align: center;
line-height: 60px;
padding: 0px;
margin-right: 3px;
float: left;
}

#profdevtext {
font-size: 16px;
}

#profdev1 {
width: 100px;
height: 60px;
background-color: blue;
text-align: center;
line-height: 60px;
padding: 0px;
margin-right: 3px;
float: left;
}

#profdevtext1 {
font-size: 16px;
}

#profdev2 {
width: 100px;
height: 60px;
background-color: blue;
text-align: center;
line-height: 60px;
padding: 0px;
margin-right: 3px;
float: left;
}

#profdevtext2 {
font-size: 16px;
}

JavaScript

$(document).ready(function() {
    $("#becomemembercontainer").hover(function() {
        $(this).stop().animate({
            "width": "1005px"
        }, 'fast');
    }, function() {
        $(this).stop().animate({
            "width": "170px"
        }, 'fast');   
    });
});