html - 列表项的图像在 html 中重复

标签 html css listitem

即使在 html 中添加了“不重复”,下拉菜单中列表项的图像也会重复 3 次。请帮助我。

html代码。

<div class="menu">
<ul>
    <li style='background-image:url(images/menu2s.jpg)0 0 no-repeat;'><a></a>
            <ul>
                    <li style='background-image:url(images/sets.jpg)0 0 no-repeat;'><a href="#">Settings</a></li>
                    <li style='background-image:url(images/more-icon.png)0 0 no-repeat;'><a href="#">More</a></li>
            </ul>
    </li>   
 </ul>
 </div>

CSS文件

body{padding: 3em; }
.menu * { 
padding:0; 
margin: 0; 
font: 12px georgia; 
list-style-type:none;}
.menu { 
position: absolute;
    bottom:0px;
    float: left;
    line-height: 10px; 
     left: 100px;
    z-index: 50;}

.menu a { 
   display: block; 
    text-decoration: none; 
    color: #3B5330;}
  .menu a:hover { background: #B0BD97;}
  .menu ul li ul li a:hover { 
   background: #ECF1E7; 
   padding-left:9px;
   border-left: solid 1px #000;}
.menu ul li ul li {
 width: 140px; 
 border: none; 
 color: #B0BD97;  
 padding-top: 3px; 
 padding-bottom:3px; 
 padding-left: 3px; 
 padding-right: 3px; 
 background: #B0BD97;
 z-index:50;
 }
 .menu ul li ul li a { 
   font: 22px arial; 
   font-weight:normal; 
   font-variant: small-caps; 
   padding-top:3px; 
   padding-bottom:3px;
   z-index:50;}
 .menu ul li {
   float: left; 
   width: 146px; 
   font-weight: bold; 
   border-top: solid 1px #283923; 
   border-bottom: solid 1px #283923; 
   background: #979E71;
   z-index:50;}
 .menu ul li a { 
   font-weight: bold;
   padding: 15px 10px;
   z-index:50;}
 .menu li{ 
    position:relative; 
    float:left;
    z-index:50;}
 .menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul{ 
  display:none;
  list-style-type:none; 
   width: 140px;
  z-index:50;}
.menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul { 
  display:block;
  z-index:50;}
.menu:hover ul li:hover ul li:hover ul { 
   position: absolute;
   margin-left: 145px;
   margin-top: -22px;
   font: 10px;
    z-index:50;}
 .menu:hover ul li:hover ul { 
   position: absolute;
   margin-top: 1px;
   font: 10px;
   z-index:50;
  }
.menu>ul>li:hover>ul { 
 bottom:100%;
 border-bottom: 1px solid transparent
 z-index:50;
 }

最佳答案

Write it like this. You wrote shorthand in background-image rather than Background.

      style='background:url(images/sets.jpg) 0 0 no-repeat;

> or

          style='background:url(images/sets.jpg) no-repeat 0 0 ;

You have not given space between the brace and zero.

关于html - 列表项的图像在 html 中重复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19462905/

相关文章:

html - 我如何在 CSS 中制作这个框(请看我的图片)?

php - html切换开关按钮单击时会转到另一个页面

html - Bootstrap 4 打印使用中等断点

json - UI5 : Dynamically build ListItems from JSON with different Icons

html - 使用 CSS 将每个元素包装在水平列表中

html - HTMLInput name 可以取数组之类的值吗

html - Edge 和 IE 中的背景调整大小

html - 您能否提供一些示例说明为什么使用正则表达式难以解析 XML 和 HTML?

python - 如何在 Selenium 中保留登录状态

android - 带有链接的 <li> 在 iPhone 上显示较小的元素符号