Question

即使在html中添加了“no repeat”，下拉菜单中列表项的图像也会重复三次。请帮帮我。

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;
 }

Answer 1

像这样写。你在背景图像而不是背景中写了速记。

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

> or

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

你没有在大括号和零之间留出空间。

列表项的图像以html重复

1 个答案: