在導航欄中沿着側面圖像列出項目

我想在導航欄中的列表項旁邊使用圖像，就像下面的圖片一樣，我也使用了表格但無法獲得輸出。我也嘗試過通過在ul標籤內直接使用img標籤來實現。但仍然無法正常工作。請幫忙。 CSS在導航欄中沿着側面圖像列出項目

/* Sub-menu */ 
#menu ul { 
list-style: none; 
margin: 0; 
padding: 0;  
display: none; 
position: absolute; 
top: 35px; 
left: 35; 
z-index: 99999;  
background-color: #444; 
background-image: linear-gradient(#444, #111);  
-moz-border-radius: 5px; 
border-radius: 5px; 
} 
#menu ul img{position: relative; float: right; width:100px; height:100px;left:100px; bottom: 50px; box-shadow: 0 1px 0 #111111, 
      0 2px 0 #777777;  background-color: #444; 
background-image: linear-gradient(#444, #111);  
-moz-border-radius: 5px; 
border-radius: 5px; 
display: block; }

HTML

<body><ul id="menu"> 
<li><a href="#">Home</a></li> 
<li> 
    <a href="#">Categories</a> 
    <ul> 
     <li><a href="#">CSS</a></li> 
     <li><a href="#">Graphic design</a></li> 
     <li><a href="#">Development tools</a></li> 
     <li><a href="#">Web design</a></li> 
     <img src="footer.png" > 
    </ul> 
</li> 
<li><a href="#">Work</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Contact</a></li> 
</ul>

來源

2016-05-21 Ra' s Al Ghul

你需要把你的列表放到另一個'div'和你的'img'中。看到https://jsfiddle.net/cpee7v11/ – Mohammad

可以使用position:absolute的圖像和ul使用pagging-right與圖像的寬度和min-height與圖像的高度，以確保ul將始終包含圖像。 https://jsfiddle.net/IA7medd/7kvc5avh/

#menu ul { 
list-style: none; 
margin: 0; 
padding: 0;  
display: none; 
position: absolute; 
top: 35px; 
left: 35; 
z-index: 99999;  
background-color: #444; 
background-image: linear-gradient(#444, #111);  
-moz-border-radius: 5px; 
border-radius: 5px; 
padding-right:120px; 
min-height:120px; 
} 
#menu ul img{ 
    position: absolute; 
    width:100px; 
    height:100px; 
    right:10px; 
    top: 10px; 
    box-shadow: 0 1px 0 #111111, 
    0 2px 0 #777777; 
    background-color: #444; 
    background-image: linear-gradient(#444, #111);  
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    display: block; 
}

來源

2016-05-21 15:09:45

謝謝搭檔它真的是一個很好的幫助 –

什麼是'pagging-right'？ – Aziz

在導航欄中沿着側面圖像列出項目

回答

相關問題