HorizontalMenu1

For WAC

HTML

<div class="container">
    <div id="home"><span id="hometext">HOME</span></div>
    <div id="becomemember"><span id="becomemembertext">BECOME A MEMBER</span></div>
    <div id="profdev"><span id="profdevtext">PROFESSIONAL DEVELOPMENT</span></div>
    <div id="members"><span id="memberstext">MEMBERS ONLY</span></div>
</div>

CSS

.container {
width: 1005px;
height: 30px;
background-color: red;
}

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

#hometext {
font-size: 16px;
}

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

#becomemembertext {
font-size: 16px;
}

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

#profdevtext {
font-size: 16px;
}

#members {
height: 30px;
width: 140px;
background-color: yellow;
line-height: 30px;
padding-left: 15px;
padding-right: 15px;
margin-right: 3px;
float: left;
overflow: hidden;
}

#members:hover {
width: 960px;
height: 30px;
background-color: yellow;
line-height: 30px;
padding-left: 15px;
padding-right: 15px;
margin-right: 0px;
float: left;
position: absolute;
z-index: 99;

}

#memberstext {
font-size: 16px;
}