I have a problem with my menu which consists of links with images that are replaced by others when in mouseover .
I made a snippet so they can see the problem. If they do, I've removed text-indent from the last two links in the menu, and so they work even though it does not have the rollover effect and the first three links rollovers work, but the links no.
.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
left: 0;
top: 0;
z-index: -1;
}
@media screen and (max-width: 1024px) {
img.bg {
left: 50%;
margin-left: -512px;
}
}
#video-wrapper1 {
position: absolute;
left: 700px;
top: 100px;
display: block;
width: 15px;
height: 15px;
z-index: 99999;
background: #0073ff;
border-radius: 50%;
transition-property: width, height;
transition-duration: .2s;
transition-timing-function: linear;
}
#video-wrapper1:hover {
width: 20px;
height: 20px;
}
nav li {
list-style-type: none;
float: left;
display: block;
margin-right: 14px;
margin-bottom: 0;
}
nav a#pull {
display: none;
}
nav {
height: 40px;
width: 50px;
position: relative;
}
nav ul {
width: 260px;
height: 40px;
height: 100px;
padding: 0;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
@media only screen and (max-width: 800px) {
nav ul {
display: none;
}
nav a#pull {
display: block;
position: relative;
}
nav a#pull:after {
content: "";
background: url('../imagens/icon_nav.png') no-repeat;
display: inline-block;
position: relative;
width: 50px;
height: 50px;
}
}
nav ul li:hover:nth-child(1) {
background: url('http://s33.postimg.org/sokmmh4lr/Logo_hover.png') no-repeat;
text-indent: 99999px;
margin-right: 14px;
display: block;
width: 50px;
height: 46px;
}
nav ul li:hover:nth-child(2) {
background: url('http://s33.postimg.org/f74u19jtb/fb_logo2.png') no-repeat;
display: block;
width: 35px;
height: 35px;
position: relative;
margin-right: 14px;
text-indent: 99999px;
}
nav ul li:hover:nth-child(3) {
background: url('http://s33.postimg.org/hrhgs7m33/twitter.png') no-repeat;
display: block;
width: 35px;
height: 35px;
position: relative;
margin-right: 14px;
text-indent: -99999px;
}
nav ul li:hover:nth-child(4) {
background: url('http://s33.postimg.org/eehydlqbz/youtube_logo.jpg') no-repeat;
display: block;
width: 35px;
height: 35px;
position: relative;
margin-right: 14px;
}
nav ul li:hover:nth-child(5) {
background: url('http://s33.postimg.org/foxos8wpb/logo_ulht.gif') no-repeat;
display: block;
width: 35px;
height: 35px;
position: relative;
margin-right: 14px;
}<!DOCTYPE html>
<title>Projecto Aurora</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="jquery/jquery-2.2.3.min.js" type="text/javascript"></script>
<script src="js/video.js" type="text/javascript"></script>
<body>
<img src="http://s33.postimg.org/3ueeqpuhb/Fundo.png"class="bg" alt="Lisboa" >
<nav class="clearfix">
<ul class="clearfix">
<li><a href="index.html"><img src="http://s33.postimg.org/697nx9pjj/Logo.png"alt=""/></a></li>
<li><a href="#"><img src="http://s33.postimg.org/cgsp8agzz/fb_logo_BK.png"alt=""/></a></li>
<li><a href="#"><img src="http://s33.postimg.org/5owb5kntb/twitter_BK.png"alt=""/></a></li>
<li><a href="#"><img src="http://s33.postimg.org/ewtlje173/youtube_logo_BK.png"alt=""/></a></li>
<li><a href="#"><img src="http://s33.postimg.org/jlndjsuj3/logo_ulht_BK.png"alt=""/></a></li>
</ul>
<a href="#" id="pull"></a>
</nav>
<div id="video-wrapper1">
<iframe id="video1" width="200" height="169" src="https://www.youtube.com/embed/Inufy4FdnRk"frameborder="0" style="display:none" allowfullscreen>
</iframe>
</div>
</body>
</html>Thanks for the help