하위 메뉴를 선택할 때 이미지를 설정하는 방법

메뉴를 만드는 작업이 있습니다. 여기서 하위 메뉴를 선택할 때 화살표 이미지를 메뉴에 설정하려고합니다. 이 이미지로 예제를 만들었습니다.하지만 그 onload에서 해당 이미지를 삭제하고 하위 메뉴를 선택할 때 표시하려고합니다. 선택한 메뉴 이미지 만 표시되어야합니다.하위 메뉴를 선택할 때 이미지를 설정하는 방법

내 CSS 파일 내가이 문제를 해결할 수있는 방법

#menu { 
    font-family: Arial; 
    font-size: 12px; 
    //background: #F8F8F8; 
} 
#menu > li > a { 
    font-family: Verdana, Arial, sans-serif; 
    font-style: normal; 
    color:#787878; 
    font-weight: bold; 
} 
#menu > li > a:hover { 
    color: #000; 
} 
#menu ul { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border-radius: 0 0 5px 5px; 
    margin-top: 1px; 
} 
#menu ul li a { 
    color: #000; 
} 
#menu ul li a:hover { 
    background: #E0E0E0; 
} 
.logout { 
    float:right; 
    width:300px; 
} 
.title { 
    float:left; 
    width:300px; 
} 
#footer { 
    width:100%; 
    height:100px; 
    float:left; 
} 
.subchild-list { 
    margin:0; 

    position: absolute !important; 
    top:0; 
    right:-87px; 
    //border-color: #ccC#FFFFFF #ccC#FFFFFF; 
} 
.child-list ul { 
    display: none !important; 
    position: absolute !important; 
    z-index: 999 !important; 
} 
.child-list li { 
    position:relative !important; 

} 
.child-list li:hover ul { 
    display: block !important; 
} 

.child-list li{ 

    border-left:1px solid #C0C0C0; 
    border-right:1px solid #C0C0C0; 
} 

.child-list ul{ 
    border-top:1px solid #C0C0C0; 
    border-bottom:5px solid #C0C0C0; 
} 

.child-list{ 
    border-bottom:5px solid #C0C0C0; 
} 
.nav-subchild 
{ 
    border-color: #ccC#FFFFFF #ccC#FFFFFF; 
} 
#nav > ul > li:hover { 
border-color: #ccC#ccC#FFFFFF; 
border-style: solid; 
border-width: 1px; 
padding-bottom: 0; 
border-radius:1px; 
} 

#menu > li { 
border-bottom:#ccc; 
border-left: 1px solid #fff; 
border-right: 1px solid #fff; 
border-top: 1px solid #fff; 
} 
#nav ul li:hover ul { margin-left:-1px; } #nav ul li ul:hover { margin-left:-1px; } 
ul li ul li 
{ 
    width: 180px; 
} 
.subchild-list { 
    margin:0; 
    right:-183px; 
    position: absolute !important; 
    top:0; 
} 
.hassub { 
    background: url('arrow.gif') right no-repeat; 
} 
#menu li:hover > a { 
    color: #000; 
     font-weight:bold; 
}

입니까?

출처

2013-03-04 Niths

을 그래서 기본적으로 당신이는'>'에 대한 지금 무엇을하고 있는지의 반대를하고 싶어? –

나는 너를 얻지 못했다 ... – Niths

지금 바로 이 CSS를

#menu .child-list > li:hover > a { 
background: #E0E0E0 url(http://www.coeliac.org.uk/sites/coeliac.org.uk/themes/coeliac/images/icon_arrow_small_right.gif) right no-repeat; 
}

Live Demo

출처

2013-03-04 05:46:33

당신의 코드는 맞다.하지만 나는 그런 식으로하고 싶지 않다. '마스터'의 하위 항목을 선택하면 화살표 이미지가 '마스터'메뉴에 표시됩니다. 그렇지 않으면 이미지가 없습니다. – Niths

내 대답을 확인하십시오 .. –

@Nithu 안녕하세요, 내 애인을 업데이트 해주세요. 확인해주세요 ... –

을 정의 이것은 몇 가지 변경 사항은

#menu ul li a:hover { 
    // background: #E0E0E0; 
    background:url(http://www.coeliac.org.uk/sites/coeliac.org.uk/themes/coeliac/images/icon_arrow_small_right.gif) right no-repeat; 
} 

.hassub { 
// background: //url(http://www.coeliac.org.uk/sites/coeliac.org.uk/themes/coeliac/images/i//con_arrow_small_right.gif) right no-repeat; 
}

Live Demo

출처

2013-03-04 05:54:11

하위 파일을 선택할 때 어떤 것이 해당 것인지 이해할 수 없습니다 상위 메뉴. 따라서 해당 메뉴를 선택하면 화살표가 부모 메뉴에 있어야합니다. – Niths

이에서보세요 ..

#menu ul li a:hover { 
    background:url(http://www.coeliac.org.uk/sites/coeliac.org.uk/themes/coeliac/images/icon_arrow_small_right.gif) right no-repeat #E0E0E0; 
    }

Live Demo

출처

2013-03-04 06:19:32

화살표 이미지를 메뉴의 가운데에 어떻게 설정할 수 있습니까? – Niths

CSS 속성을 시도했습니다 BACKGROUND-POSITION ??? –

하위 메뉴를 선택할 때 이미지를 설정하는 방법

답변

관련 문제