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;
}
답장을 보내 주셔서 감사합니다. 메뉴 드롭 다운 버튼을 클릭하면 하위 항목이 표시되지만 '메뉴'이미지가 사라지고 배경색이 나타납니다. 고정시킬 이미지가 필요해. @wikijames –
@DD. 고마워. 그게 너를 도운다면, 대답으로 이것을 클릭하면 내가 appricate 것이다. 당신이 말한 다른 문제. 더 명확하게 인쇄 화면 코드를 제공 할 수 있습니까? 이미지 경로를 확인하십시오. 마우스를 올렸습니까? –