Question

我想在导航栏中的列表项旁边使用图像，就像下面的图片我也使用了表但是无法获得输出。我也尝试过使用img标签直接在里面ul标签。但仍然没有工作。请帮忙。 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>

Answer 1

您可以使用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;
}

列出导航栏中

1 个答案: