如何將圖片放置在導航欄上？

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

這是一個非常小的「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 */ 
} 

Answer 2

你必須定義絕對#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; 
     }