html - 位置绝对使 <UL> <LI> 不起作用

Question

你好，我正在使用 Bootstrap 菜单，但我的第一个链接因为位置不工作:绝对；的 <li>元素。欢迎任何帮助如何解决这个问题。如果我删除该位置，第二个和第三个链接将不起作用。

这是我的 CSS:

.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:0 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; }

这是菜单代码:

切换导航

    <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 -->

Answer 1

为什么要使 li 绝对定位？您是否尝试过使它与获得 position:absolute 样式的父项相关？