Hello I have encountered an issue with the bootstrap menu that I am using. The first link is not functioning properly due to the position: absolute; attribute of the <li> element. Any suggestions on how to resolve this would be greatly appreciated. Interestingly, when I remove the position attribute, the second and third links stop working as well.
Here is my CSS code:
.navbar-inverse { background:#000; height:82px;}
/* menu */
#navlist {
position: relative;
display: block;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
display:inline-block;
position: absolute;
top:10px;
font-family: 'Open Sans', sans-serif;
font-size:11px;
font-weight:600;
}
#navlist li, #navlist a {
height: 94px;
width: 94px;
display: block;
padding:0px;
margin:auto;
text-align: center;
}
#sprite_01 { text-align:center; display:inline-block; width:42px; height:41px; background:url('../images/butons_sprites.png') 0 0;}
.link_01:hover #sprite_01{background:url('../images/butons_sprites.png') 0 -41px;}
.link_01 {left:0px;}
#sprite_02 {text-align:center; display:inline-block; width:42px; height:41px; background:url('../images/butons_sprites.png') -42px 0;}
.link_02 {left:94px;}
.link_02:hover #sprite_02{background:url('../images/butons_sprites.png') -42px -41px;}
#sprite_03 {text-align:center; display:inline-block; width:42px; height:41px; background:url('../images/butons_sprites.png') -84px 0;}
.link_03 {left:184px;}
.link_03:hover #sprite_03{background:url('../images/butons_sprites.png') -84px -41px;}
#sprite_04 {text-align:center; display:inline-block; width:42px; height:41px; background:url('../images/butons_sprites.png') -126px 0;}
.link_04 {left:274px;}
.link_04:hover #sprite_04{background:url('../images/butons_sprites.png') -126px -41px;}
#sprite_05 {text-align:center; display:inline-block; width:42px; height:41px; background:url('../images/butons_sprites.png') -168px 0;}
.link_05 {left:364px;}
.link_05:hover #sprite_05{background:url('../images/butons_sprites.png') -168px -41px;}
#sprite_06 {text-align:center; display:inline-block; width:42px; height:41px; background:url('../images/butons_sprites.png') -210px 0;}
.link_06 {left:454px;}
.link_06:hover #sprite_06{background:url('../images/butons_sprites.png') -210px -41px;}
This is the Menu CODE:
Toggle navigation
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="navlist">
<li><a class="link_01" href="cursos.php">
<span id="sprite_01"></span>
<div class="globalnav__sitemap__item__title">
<div class="globalnav__sitemap__item__title__text">Cursos</div>
</div>
</a></li>
<li><a class="link_02" href="recetas.php">
<span id="sprite_02"></span>
<div class="globalnav__sitemap__item__title">
<div class="globalnav__sitemap__item__title__text">Recetas</div>
</div>
</a></li>
<li><a class="link_03" href="sabias.php">
<span id="sprite_03"></span>
<div class="globalnav__sitemap__item__title">
<div class="globalnav__sitemap__item__title__text">Sabias Que</div>
</div>
</a></li>
<li><a class="link_04" href="users.php">
<span id="sprite_04"></span>
<div class="globalnav__sitemap__item__title">
<div class="globalnav__sitemap__item__title__text">Usuarios</div>
</div>
</a></li>
<li><a class="link_05" href="marcas.php">
<span id="sprite_05"></span>
<div class="globalnav__sitemap__item__title">
<div class="globalnav__sitemap__item__title__text">Nuestras Marcas</div>
</div>
</a></li>
<li><a class="link_06" href="archivo.php">
<span id="sprite_06"></span>
<div class="globalnav__sitemap__item__title">
<div class="globalnav__sitemap__item__title__text">Archivo</div>
</div>
</a></li>
</ul>
</div><!-- /.nav-collapse -->