어제 여쭤봤던 질문의 연장선입니다..아고.. 머리가 아프네요 아직 아침도안먹고 소스대입,수정만 2시간정도 한듯싶네요..ㅎㅎ
어제 여쭤봤던거보다 매우 약간의 진도는 나갔습니다..ㅎㅎ;
적용 사이트는 http://operaviva7.cafe24.com/page_PKpf33 입니다.
첫번째 여쭤볼점은
#side_cssmenu ul li.has-sub > a:after {
content: url(red.png);
position: absolute;
top: 50%;
right: 15px;
margin-top: -6px;
}
이렇게 소스를 넣어 아래와같이 content로 red.png 파일을 불러오고 있습니다.
남은것은 마우스 오버시에 red.png 파일을 동일폴더상에 blue.png 로 바꾸는 것입니다.
어제 답변달아주신것과같이 hover 를 이용하여 여러방법을 시도해보았는데 제가 한 방법으로는
content: url(red.png); 부분(옆에 네모난 색깔박스부분)만이 아닌 마우스오버된 메뉴부분 전체가 blue.png 로 바뀌어 버리네요
#side_cssmenu > ul > li:hover a {
content: url(blue.png);
background: #f3f3f3;
} 이렇게 소스를 적용하였을 때 그렇구요 여기서 좀 더 진도가 나가면 오른쪽 content 부분만 바꿀 수 있을 거 같기도합니다.
팁 부탁드립니다 __)
두번째 여쭤볼점은
바로 위 사진을 보시면 아시겠지만 붕붕붕 및 붕붕붕부분에 보시면 텍스트 좌측에 약간의 공간이 벌어져 있는것을 보실 수 있습니다.
active has-sub 라고, 해당 메뉴에 들어갔을 경우 좌측에 공간이 벌어지는 현상입니다.
요소검사로도 원인을 찾을수가없네요 도움 부탁드립니다. ㅜ..ㅜ 소스를 3일동안 수정하고 쳐다봤으니 구조가 잘 이해가 됬음 좋겠는데 쉽지가않네요..ㅜ.ㅜ
http://operaviva7.cafe24.com/board_sUvE85 페이지 입니다.
두번째것은 #cssmenu > ul > li.has-sub > a { 의 padding-right: 0px; 을 한번 지워보세요..