묻고답하기
간단한 CSS 질문 드립니다.
2013.08.11 00:06
**HTML 부분**
<ul id="lnb">
<li loop="$main_menu->list=>$key1,$val1" class="on"|cond="$val1['selected']">
<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
<ul cond="$val1['list']">
<li loop="$val1['list']=>$key2,$val2" class="on"|cond="$val2['selected']">
<a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></li>
</ul>
</li>
</ul>**CSS 부분**
#lnb li { list-style:none; }
#lnb li a { text-decoration:none; color:#000; background:url(/imgs/e1_small.gif) no-repeat 0 4px; padding-left:7px; }
#lnb li .on a { color:blue; background:url(/imgs/e1_small_on.gif) no-repeat 0 4px; padding-left:7px; }저 소스를 실행시키면 대략 이런 모양이 나오는데요.
▷ 1번 메뉴
▷ 1번 메뉴의 하위 메뉴 1
▷ 1번 메뉴의 하위 메뉴 2
▷ 1번 메뉴의 하위 메뉴 3
대략 이런 모양입니다.
이 중 클릭된 메뉴에는 이런 식으로 적용이 됩니다
만약에 1번 메뉴의 하위 메뉴 2번을 클릭했을 때
▷ 1번 메뉴
▷ 1번 메뉴의 하위 메뉴 1
▶ 1번 메뉴의 하위 메뉴 2
▷ 1번 메뉴의 하위 메뉴 3
--------------------------------------------------------------------------------
뭐 대략 이런 모양인데요....
맨 위에 '1번 메뉴' 라고 되어 있는 부분에도 배경 (화살표모양) 이 적용되어 있는데,
이것을 없애고 싶거든요... 어떻게 해야 하나요?
html 에서 li 의 첫번쨰 부분의 클래스를 on 이 아닌 다른 것으로 주고,
그 클래스에다가 background-image:none; 을 먹였는데 적용이 되지 않습니다....
간단한 CSS 고수님들 부탁드립니다...ㅠㅠ
▷ 1번 메뉴
▷ 1번 메뉴의 하위 메뉴 1
▷ 1번 메뉴의 하위 메뉴 2
▷ 1번 메뉴의 하위 메뉴 3
이렇게 된 걸
1번 메뉴
▷ 1번 메뉴의 하위 메뉴 1
▷ 1번 메뉴의 하위 메뉴 2
▷ 1번 메뉴의 하위 메뉴 3
댓글 2
-
#lnb li a { background:url(/imgs/e1_small.gif) }
#lnb li .on a { background:url(/imgs/e1_small_on.gif) }
#lnb li li a { background:url(/imgs/e1_small.gif) }
#lnb li li .on a { background:url(/imgs/e1_small_on.gif) }빨간부분 지우고초록부분 추가하세요.
#lnb li a: 이곳에 있는 background:url(/imgs/e1_small.gif) 이것을 삭제 해보세요.
(/imgs/e1_small.gif) 이 이미지에서 화살표가 출려된다면 말이죠.
만약 이렇게해도 안된다고 하면 자바에서 설정되어있는게 아닌가 싶은데요?