css - 如何将图像放在导航栏上？

Question

如何像这本书一样将图像放在导航栏上？我需要 CSS。https://www.dropbox.com/s/md2teu0ol82o23x/Website.psd

<div class="navbar-inner">
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Our Fleet</a></li>
    <li><a href="#">Booking</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#" id="book_online"></a></li>
  </ul>
</div>
.navbar .nav > li > #book_online {
background: url(../blabor2.jpg) no-repeat;
width: 183px;
height: 64px;
text-indent: -99999px;
position: absolute;
}

Answer 1

您必须定义相对于 li 的绝对 #book_position。
希望这能解决您的问题...

.nav>li{
   position:relative;
    }  

#book_online{
      position:absolute;
      z-index:10;
     display:block;
     background: url(../blabor2.jpg) no-repeat;
     width: 183px; 
     height: 64px; 
      }

Answer 2

这是一个非常小的“CSS”代码，我只能猜测

a .navbar .nav > li > #book_online {
    display: block; /* this is new */
    background: url(../blabor2.jpg) no-repeat;
    width: 183px;
    height: 64px;
    text-indent: -99999px;
    /*position: absolute;*//* may be you don't need this */
}