here is my JsFiddle: JsFiddle
i want to know why my image/image caption overlap's my website banner? I'm pretty sure its something to do with my absolute positioning but I'm not 100% sure! I'm trying to have the image/image caption right under the banner. I don't want to position it with px/cm/in because it may be different across screen sizes!
Html:
<!doctype html>
<title>Untitled Document</title>
<body>
<div class="banner"><img src="http://i.imgur.com/7m4rahc.jpg" alt="Loading..."/></div>
<div id="mainwrapper">
<div id="box-3" class="box">
<img id="image-3" src="http://i.imgur.com/NEZfdM7.jpg"/>
<span class="caption fade-caption">
<h3>Click To Subscribe</h3>
<center>
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel="AfterlifeGamingHD" data-layout="full" data-count="default"></div>
</center>
</span>
</div>
</div>
</body>
CSS:
charset "utf-8";
/* CSS Document */
body {
background-image: url(http://i.imgur.com/2MVANTR.jpg);
background-repeat: no-repeat;
margin: 0;
padding: 0;
}
img, .banner {
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
#mainwrapper .box {
border: 5px solid #fff;
cursor: pointer;
float: left;
position: relative;
overflow: hidden;
width: 370px;
height: 470px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .box img {
position: absolute;
left: 0;
width: 370px;
height: 470px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
#mainwrapper .box .caption {
background-color: rgba(0,0,0,0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {
opacity: 0;
width: 370px;
height: 470px;
text-align: left;
padding: 15px;
}
#mainwrapper .box:hover .fade-caption {
opacity: 1;
}
position:absolute removes an element from the document flow, allowing other elements to take up the freed space. There seems to be no real reason for you using position: absolute, so just remove it...
#box-3{
position:relative;
top:500px;(set this to what you want it)
}
http://jsfiddle.net/J35sf/5/
You could just position it to where ever you want it. :)
Related
We have a main index page with a dropdown menu and slide show, and the z-index works fine, but in our other pages, we removed the slideshow and left the dropdown menu. But for some reason in the pages without the slideshow, the dropdown menu gets hidden behind the container the slideshow used to be, despite the removal of all slideshow HTML. This leads me to believe it is a CSS issue.
Any suggestions would be well appreciated!
Here's the HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Stigler Public Schools</title>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="\\stigler-web\web\New Website\caleab\stiglerstylesheet.css"/>
</head>
<body>
<img class="logo" src="sps_logo.png" alt="Stigler Public Schools">
<p class="header">Stigler Public Schools</p>
<div class="nav">
<ul class="navigation">
<a class="main" href="#url">District</a>
<li class="n1">High School</li>
<li class="n2">Middle School</li>
<li class="n3">Grade School</li>
<li class="n4">Administration</li>
</ul>
<ul class="navigation">
<a class="main" href="#url">Resources</a>
<li class="n1">School Calender</li>
<li class="n2">Menus</li>
<li class="n3">Employment</li>
<li class="n4">Counseling</li>
<li class="n5">Grade Book</li>
<li class="n6">Yearbook</li>
</ul>
</td>
<ul class="navigation">
<a class="main" href="#url">Organizations</a>
<li class="n1">Athletics</li>
<li class="n2">Music</li>
<li class="n3">Drama</li>
<li class="n4">FFA</li>
<li class="n5">A-Z</li>
</ul>
<ul class="navigation">
<a class="main" href="#url">Board Of Education</a>
<li class="n1">Information</li>
<li class="n2">Meetings</li>
<li class="n3">Policies</li>
</ul>
</div>
</body>
</html>
And Here's the CSS
* {
margin: 0px;
padding: 0px;
outline: none;
border: 0px;
}
body {
background-image: url(background.png);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
margin: 0px auto;
padding: 0px;
width: 100%;
overflow: hidden;
}
h1 {
border-top: none;
border-left: none;
border-bottom: 5px groove red;
border-right: none;
color: #e60000;
font-family: century gothic;
text-align: center;
color: #FF000;
}
h2 {
font-family: century gothic;
}
h3 {
font-family: century gothic;
}
h5 {
font-family: californian fb;
font-szie: 1.15em;
}
p {
border-top: none;
border-left: none;
border-bottom: none;
border-right: none;
font-family: californian fb;
font-size: 1.15em;
}
table#sitelinks td {
font-size: 1.15em;
}
table#sitelinks tr:nth-child(odd) {
background-color: #fff
}
table tr:nth-child(even) {
background-color: #fff
}
table tr:nth-child(odd) {
background-color: #eee
}
hr {
border-top: none;
border-left: none;
border-bottom: 5px groove red;
border-right: none;
font-family: californian fb;
font-size: 1.15em;
}
th {
text-align: left;
font-family: century gothic;
padding: 10px 0px 0px 0px;
font-size: 1.15em;
}
td {
font-family: century gothic;
border: 1px solid black;
padding: 5px 5px 5px 5px;
text-align: center;
font-size: 1em;
}
.center {
text-align: center;
}
.blue {
color: blue;
}
.bottomborder {
text-align: center;
border-bottom: 5px groove red;
}
a:link {
color: #e60000;
text-decoration: none
}
a:visited {
color: #e60000;
text-decoration: none
}
a:hover {
color: #e60000;
text-decoration: none
}
a:active {
color: #e60000;
text-decoration: none
}
.logo {
display: block;
margin: 0 auto;
height: 160px;
width: 160px;
}
.header {
padding-left: 140px
}
a {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: #999;
}
.navwrapper {}
.nav {
width: 79.31%;
text-align: center;
margin: 0px auto;
z-index: 2;
position: relative;
}
a:hover {
color: #FF0000;
}
/* NAVIGATION */
.navigation {
list-style: none;
margin: 0;
padding: 0;
height: 40px;
margin: 10px auto;
background: #FF0000;
float: left;
position: relative;
z-index: 10
}
.navigation,
.navigation a.main {
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
}
.navigation:hover,
.navigation:hover a.main {
border-radius: 0px 0px 0 0;
-webkit-border-radius: 0px 0px 0 0;
-moz-border-radius: 0px 0px 0 0;
}
.navigation a.main {
display: inline-block;
height: 40px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.navigation:hover a.main {
color: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.04);
}
.navigation li {
width: 250px;
height: 40px;
background: #F7F7F7;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
position: relative;
z-index: 30;
overflow: visible;
}
.navigation li:nth-child(even) {
background: #F5F5F5;
}
.navigation li:nth-child(odd) {
background: #EFEFEF;
}
.navigation li.n1 {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}
.navigation li.n2 {
-webkit-transition: 0.2s linear 0.3s;
-o-transition: 0.2s linear 0.3s;
transition: 0.2s linear 0.3s;
}
.navigation li.n3 {
-webkit-transition: 0.2s linear 0.2s;
-o-transition: 0.2s linear 0.2s;
transition: 0.2s linear 0.2s;
}
.navigation li.n4 {
-webkit-transition: 0.2s linear 0.1s;
-o-transition: 0.2s linear 0.1s;
transition: 0.2s linear 0.1s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n4 {
transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.navigation:hover .n6 {
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s
}
/* End Navigation */
/*Slideshow */
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
}
.mySlides {
display: none;
overflow: hidden;
}
.slideshowimg {
min-width: 100%;
max-width: 100%;
max-height: none;
border: 2px solid #ffffff
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
min-width: 1000px;
min-height: 500px;
max-height: 500px;
position: fixed;
margin: 0px auto;
clear: both;
z-index: 1;
position: relative;
overflow: hidden;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 30px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}
/* End Slideshow */
I fixed this on my own. I realized that since there was no more content under the drop-down menu, the page technically ended, hence the disappearing menu. At least that's my conclusion. After adding the intended content to the page, they worked just fine.
Hi guys I have a problem. I want show just normal my text on the image. When I do mouseover should be change image opacity except my text and png icon, it's should be seen normal (without opacity ).Like that.Thanks http://demo.digipieces.com/gusteau-html/menu-1.html
.foodMenu {
text-align: center;
height: 210px;
width: 280px;
position: relative;
}
.foodMenu:after {
content:'\A';
position:absolute;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
top:0;
left:0;
width:100%; height:100%;
}
.foodMenu:hover:after {
opacity: 1;
}
.foodMenu .menuTitle {
font-weight: 300;
font-size: 32px;
text-align: center;
text-transform: none;
position: absolute;
bottom:30px;
left:0;
right:0;
transition:all 0.4s ease-in-out;
-webkit-transition:all 0.4s cubic-bezier(x1,y1,x2,y2);
text-rendering: optimizelegibility;
opacity: 0;
}
.foodMenu:hover .menuTitle {
opacity: 1;
bottom: 70px;
}
.foodMenu .curve {
text-align: center;
text-transform: none;
position:absolute;
bottom:70px;
left:120px;
right:0;
opacity:0;
transition:all 0.4s ease-in-out;
-webkit-transition:all 0.4s;
}
.foodMenu:hover .curve {
opacity: 1;
}
<div class="col span-1-of-4 step_box">
<div class="foodMenu js-wp-2">
<img src="http://lorempixel.com/output/food-q-c-280-210-1.jpg" alt="our menu meal">
<h3 style="color:#ffffff;" class="menuTitle">Meals</h3>
<img src="img/curve.png" alt="curve" class="curve">
</div>
</div>
how to do responsive hover?
This is good hover example and it's perfectly fits for my screen size and this is bad not responsive hover example
This is my code
HTML
<div class="product-img-list">
<%= link_to product_path(product), class: 'product_link' do %>
<%= image_tag(product.image_url, class: "img-responsive", size: "300x250") %>
<% end %>
<span class="product-img-text"><span>code</span></span>
</div>
CSS
span.product-img-text {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 80px;
left: 15px;
position: absolute;
top: 230px;
width: 291px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.product-img-list:hover span.product-img-text {
opacity: 1;
}
span.product-img-text span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.img-responsive {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
.product-img-list.img-responsive {
display: inline-block;
margin: 0 1em 1em 0;
position: relative;
}
Thank you for help
I would say that you must make the .product-img-text be responsive (instead of using hardcoded dimensions)
something like the following
span.product-img-text {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
position: absolute;
height: 25%; /*assuming text is not that much*/
left: 1em; /*to account for margin*/
right:1em /*to account for margin*/
bottom: 0; /*add it to bottom of image*/
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
and you will have to make .product-img-list be realtive positioned if it is not.
.product-img-list{position:relative}
I am trying to get an overlay over some images I have tried so many ways and I can't seem to get it over the image. The overlay either goes above or below, but won't go over the image. any help would be awesome!
Here is my code:
.friend-profiles {
font-family: "Lora", serif;
width: 52%;
padding-top: 15px;
}
.title-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 0 10px;
text-align: center;
width: 100%;
border: 1px solid #dedede;
box-shadow: -1px 1px 3px 0 rgba(0, 0, 0, 0.1);
outline: none;
height: 35px;
}
.sort {
border: 1px solid #272727;
padding: 1px 10px;
font-size: 8px;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
border-radius: 0;
}
.sort:focus {
outline: none;
}
.friends-list{
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
.friend-profilePic {
margin-bottom: 15px;
width: 200px;
height: 150px;
}
.box {
width: 200px;
height: 150px;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
border-bottom:2px solid #fff;
border-right:2px solid #fff;
margin:5% auto 0 auto;
background-size:cover;
overflow:hidden;
}
.overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;}
.box:hover .overlay {
opacity:1;}
<div class="friend-profiles">
<nav class="title-header">
<a ui-sref="friend-search"><img src="/images/Icons/Search.svg"></a>
<input class="search-friends" type="text" placeholder="Search For Friends" onfocus="this.placeholder=''" onblur="this.placeholder = 'Search For Friends'">
</nav>
<div class="friends-list">
<div ng-repeat="results in userResults">
<img ng-src="{{results.profileUrl}}" class="friend-profilePic">
<div class="box">
<div class="overlay">
<p>test</p>
</div>
</div>
</div>
</div>
</div>
I have added some element and style, that .box position to absolute.
.friend-profiles {
font-family: "Lora", serif;
width: 52%;
padding-top: 15px;
}
.title-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 0 10px;
text-align: center;
width: 100%;
border: 1px solid #dedede;
box-shadow: -1px 1px 3px 0 rgba(0, 0, 0, 0.1);
outline: none;
height: 35px;
}
.sort {
border: 1px solid #272727;
padding: 1px 10px;
font-size: 8px;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
border-radius: 0;
}
.sort:focus {
outline: none;
}
.friends-list{
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
.friend-profilePic {
width: 200px;
height: 150px;
}
.picture-wrapper {
position:relative;
overflow:hidden;
}
.box {
position:absolute;
top:0;left:0;
width: 100%;
height: 100%;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
border-bottom:2px solid #fff;
border-right:2px solid #fff;
background-size:cover;
overflow:hidden;
}
.overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;
width:100%;height:100%;
}
.box:hover .overlay {
opacity:1;}
<div class="friend-profiles">
<nav class="title-header">
<a ui-sref="friend-search"><img src="/images/Icons/Search.svg"></a>
<input class="search-friends" type="text" placeholder="Search For Friends" onfocus="this.placeholder=''" onblur="this.placeholder = 'Search For Friends'">
</nav>
<div class="friends-list">
<div ng-repeat="results in userResults" class="picture-wrapper">
<img ng-src="{{results.profileUrl}}" class="friend-profilePic">
<div class="box">
<div class="overlay">
<p>test</p>
</div>
</div>
</div>
</div>
</div>
Your question in confusing but As much as I understood you want to show text or another image on image hover
Here is the code:
If it's not what meant tell me.
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background-color: rgba(75,75,75,0.7);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .overlay {
background-color: rgba(48, 152, 157, 0.4);
}
.hovereffect img {
display: block;
position: relative;
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover h2 {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
font-weight: normal;
margin: -52px 0 0 0;
padding: 62px 100px;
}
.hovereffect:hover a.info {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
<div style="width:350px; height:200px;">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<h2>Hover effect</h2>
<a class="info" href="#">link here</a>
</div>
</div>
</div>
Ok, so I have an empty <span> that is nested in side my <li>'s of an unordered list. The span holds a background image that is supposed to appear on :hover. The problem is that while the animation is transitioning, the z-index is wrong, the <span> stacks itself in front of the <a> element which precedes it in the DOM. As soon as the animation completes, however, the stacking order corrects itself. The result is a visual sudden "snap" of the effect and also the link becomes unclickable for the duration of the CSS3 transition.
Can anyone break down what is happening at the DOM level? How can I fix this?
You can see a working example that demonstrates the issue here: http://jsfiddle.net/qZkfw/1/
My HTML
<div id="nav">
<ul id="nav-main">
<li>Home<span></span></li>
<li>About<span></span></li>
<li>Get Fit<span></span>
<ul class="nav-secondary">
<li>Exercise Library</li>
<li>Find An Instructor</li>
<li>Fitness Tools</li>
</ul>
</li>
<li>Find An Instructor<span></span></li>
<li>Get Certified<span></span></li>
</ul>
</div>
my CSS
#nav-main li {
margin:0;
padding:5px;
position: relative;
display: block;
float: left;
margin-left: 10px;
}
#nav-main li a {
color: #97dd6e;
font-size: 1.1em;
text-decoration: none;
text-align: center;
margin-right: -7px;
line-height: 19px;
z-index: 99;
}
#nav-main li span {
height: 28px;
background: transparent url('/images/application/bg_nav_active_repeat.png') repeat-x top center;
display: block;
margin: -22px -5px 0 2px;
padding: 3px 0 0 0;
z-index: 98;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#nav-main li:hover span {
opacity: 1;
visibility: visible;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#nav-main li span:before, #nav-main li span:after {
content: '';
height: 28px;
width: 7px;
display: block;
background: transparent url('/images/application/bg_nav_active_before.png') no-repeat left top;
position: absolute;
top: 2px;
left: 0;
z-index: 999;
}
#nav-main li span:after {
background: transparent url('/images/application/bg_nav_active_after.png') no-repeat right top;
left: 100%;
}
Add position:relative; z-index: -1; to #nav-main li span.
Updated jsfiddle.
Edit:
I figured it out.
Static elements do not obey z-index, so you need to add position:relative; to #nav-main li a.
Updated jsfiddle.