2013-10-19 4 views
0

html에 "반복 없음"이 추가 되어도 드롭 다운 메뉴의 목록 항목 이미지가 세 번 반복됩니다. 도와주세요.목록 항목의 이미지가 html로 반복됩니다.

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

답변

0

쓰기를. 배경보다는 배경 이미지에서 속기를 썼습니다.

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

> or 

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

하기는 중괄호 제로 사이의 공간을 제공하지 않았습니다.

+0

답장을 보내 주셔서 감사합니다. 메뉴 드롭 다운 버튼을 클릭하면 하위 항목이 표시되지만 '메뉴'이미지가 사라지고 배경색이 나타납니다. 고정시킬 이미지가 필요해. @wikijames –

+0

@DD. 고마워. 그게 너를 도운다면, 대답으로 이것을 클릭하면 내가 appricate 것이다. 당신이 말한 다른 문제. 더 명확하게 인쇄 화면 코드를 제공 할 수 있습니까? 이미지 경로를 확인하십시오. 마우스를 올렸습니까? –