HorizontalMenu1

For WAC

HTML

<div class="container">
    <div class="gamewrapper">
        <div class="game-name">
        	<div class="game-img"></div>
        	<div class="game-name-title">1</div>            
        </div>
                <div class="game-name-info">
        	<p>bda daskd akj dja d ajd ka dksadja skd aksjdka sjdadkjad kaj dkja kjsd akj dkj akjd kja skjd ksajd</p>
			<p>dnakjndja kjdajd kja dj ajd ja jd as djas jd ajs dkjas kjd ajs dja jsd a sjd akjdjkas d</p>
			<a class="link" href="#"><div class="button">Click here</div></a>
        </div>
    </div>
        <div class="gamewrapper">
        <div class="game-name">
        	<div class="game-img"></div>
        	<div class="game-name-title">2</div>            
        </div>
        <div class="game-name-info">Haha</div>
    </div>
        <div class="gamewrapper">
        <div class="game-name">
        	<div class="game-img"></div>
        	<div class="game-name-title">3</div>            
        </div>
        <div class="game-name-info">yoYo</div>
    </div>
        <div class="gamewrapper">
        <div class="game-name">
        	<div class="game-img"></div>
        	<div class="game-name-title">4</div>            
        </div>
        <div class="game-name-info">Same</div>
    </div>
        <div class="gamewrapper">
        <div class="game-name">
        	<div class="game-img"></div>
        	<div class="game-name-title">5</div>            
        </div>
        <div class="game-name-info">test</div>
    </div>
</div>

CSS

body {background-color:#2b2b2b;}	
.container {
width: 960px;
height: 165px;
overflow: hidden;
margin:10px 0px 10px 0px;
}
.gamewrapper {
width: 185px;
height: 165px;;
float: left;
margin-right: 7px;
}
.gamewrapper:hover {
width: 960px;
height: 165px;
float: left;
position: absolute;
z-index: 99;
margin-right: 7px;
}
.expand {
width: 960px;
height: 165px;
float: left;
position: absolute;
z-index: 99;
margin-right: 7px;
}
.game-name {
width: 185px;
height: 165px;
background-color: white;
text-align: center;
padding: 0px;
margin-right: 7px;
float: left;
}
.game-name:hover {
background-color:black;
color:white;
}
.game-name-title {
font-size: 16px;
height:45px;
padding-top:10px;
}
.game-name-info {
width: 762px;
height: 165px;
background-color: black;
color:white;;
padding: 0px;
float: left;
}
.game-name-info p {
width: 700px;
padding-left:10px;
font-size:14px;
margin:10px 0px;
}
.game-img {
height:120px;
width:185px;
background-image:url(bunnys.jpg);
background-repeat:no-repeat;
}
.button {
height:42px;
width:181px;
background-image:url(button.png);
background-repeat:no-repeat;
margin-left:8px;
}

JavaScript

$(document).ready(function(){
  $(".gamewrapper").click(function(){
    $(".gamewrapper").addClass("expand");
  });
});