rollover 시 css 효과 질문입니다.
꽃달
서브메뉴제목01 서브메뉴제목02서브메뉴제목03 ▼서브메뉴제목04서브메뉴제목05
위와같이 table로 구성된 메뉴 목록이 있을 때,
메뉴 에 마우스를 올리면,
해당 메뉴의 오른쪽 끝에 아래로 향하는 화살표가 뜨게 하고 싶습니다.
마우스를 아웃시키면 다시 사라지게 되구요.
그리고 그 화살표는 클릭 가능하게 하고싶습니다.
해보려고 노력했으나 잘 되지 않아 질문드리게 되었습니다. 아래는 제가 시도한 방법입니다. a .bbb {
top:4px;
position：absolute;
right:3px;
display：none;
cursor:pointer;
width:11px;
height:12px;
background:url(http://www.google.co.kr/reader/ui/1007736847-lhn-sprite.png) no-repeat scroll 0 0 transparent;
background-position: -12 -40px;
}
a:hover .bbb {
display:block;
}
table border=1 width=200
tr
td
a href=#
div style=position:relative
spanSTRING/span
div class=bbb/div
/div
/a
/td
/tr
/table
-
MyWay
a 태그 안에 div가 들어가는 건 잘못 된 경우네요~
일단 이거부터 수정하시고 a태그를 블록 속성으로 만들어 놓고 a:hover되었을때 화살표가 보이게 a:hover에만 백그라운드를 주시는건 어떨까요? -
허리품
테이블보다는 ul태그를 쓰는게 더 바른듯...
ul
lia서브제목메뉴1/a/li
/ul
이 때, a는 display:block, height:100%, width:100% 를 주고요
li:hover이나 a:hover에 배경을 주면 되겠네요.