I've checked out similar inquiries, but I couldn't find a solution that fits my situation. I'm looking to make the boxes around each text link clickable, as opposed to just the text itself.
HTML
<div class="container">
<ul class="nav">
<li class="nav-home">
<a href="index.html">Home</a>
</li>
<li class="nav-games">
<a href="games.html">Games</a>
</li>
<li class="nav-chat">
<a href="chat.html">Chat</a>
</li>
<li class="nav-suggestions">
<a href="suggestions.html">Suggestions</a>
</li>
</ul>
</div>
CSS
.nav {
width: 900;
clear: right;
height: 55px;
margin-left: 22px;
margin-right: 22px;
padding: 0;
z-index: 5;
overflow: visible;
background: #161616;
background: -moz-linear-gradient(top, #161616 0%, #282828 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#161616), color-stop(100%,#282828));
background: -webkit-linear-gradient(top, #161616 0%,#282828 100%);
background: -o-linear-gradient(top, #161616 0%,#282828 100%);
background: -ms-linear-gradient(top, #161616 0%,#282828 100%);
background: linear-gradient(to bottom, #161616 0%,#282828 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#161616', endColorstr='#282828',GradientType=0 );
border: 1px solid #090909;
box-shadow: inset 0px 0px 1px rgba(255,255,255,.2), 0px 3px 5px rgba(0,0,0,.5);
}
.nav li {
list-style-type: none;
float: left;
display: inline-block;
padding: 0px 89px;
width: 55;
text-align: center;
height: 55px;
border-right: 1px solid #090909;
box-shadow: 1px 0px 0px rgba(255,255,255,.1);
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2inear;
-o-transition:all 1s linear;
transition:all 0.2s linear;
}
.nav li.logo:hover { opacity: 1; background-color: transparent;}
.nav li:last-child { border: none; box-shadow: none; }
I made an adjustment by adding display: block; which allowed the areas above and below the text to be clickable, but not on the sides.
.nav li a, nav ul li a:visited {
line-height: 55px;
text-decoration: none;
display: block;
color: #9c9c9c;
font-size: 15px;
font-family: "Droid Sans", Arial, sans-serif;
text-transform: uppercase;
text-shadow: 0px 1px 0px rgba(0,0,0,.9);
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.nav li:hover {
background-color: rgba(0,0,0,.2);
background-color: #191919\9;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
color: white;
}
.nav li:hover a { color: white;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
#nav-home .nav li.nav-home a, #nav-games .nav li.nav-games a, #nav-chat .nav li.nav-chat a,
#nav-comments .nav li.nav-comments a { color: white; }
Here is the jsfiddle http://jsfiddle.net/U2d9X/3/ for visual reference. Any assistance would be highly appreciated. If you need more information or clarification, please ask rather than rejecting this inquiry.