수다닷컴

열공중인 학생인데요 ...메뉴바 작업중이였습니다 ...
근대 이작업물은 코드는 밑에 보시면요 !!
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml xml:lang=ko lang=ko
head
title Navigation05 /title
meta http-equiv=Content-type content=text/html; charset=euc-kr /
style type=text/css
* {margin:0px; padding:0px;}
body {font:12px Verdana, sans-serif;}
ul {list-style:none;}
a {text-decoration:none;}
/*layout*/
body {background:url(images/M_bg.gif) repeat-x 0 50px;}
#navi {margin:0px auto; width:900px;}
#navi ul {margin-top:50px; float:left;}
#navi li {float:left;}
#navi a {display:block; width:150px; height:35px; text-indent:-5000px;}
#navi li#menu1 a {background-image:url(images/MM_Intro.gif);}
#navi li#menu2 a {background-image:url(images/MM_Join.gif);}
#navi li#menu3 a {background-image:url(images/MM_Share.gif);}
#navi li#menu4 a {background-image:url(images/MM_Story.gif);}
#navi li#menu5 a {background-image:url(images/MM_Event.gif);}
#navi li#menu6 a {background-image:url(images/MM_Comm.gif);}
#navi li a:hover {background-position:left bottom;}
/style
/head
body
div id=navi
ul
li id=menu1a href=아름다운가게소개/a/li
li id=menu2a href=참여안내/a/li
li id=menu3a href=나눔사업/a/li
li id=menu4a href=아,가이야기/a/li
li id=menu5a href=캠페인&이벤트/a/li
li id=menu6a href=커뮤니티/a/li
/ul
/div
/body
/html

롤오버할 이미지 명령이 #navi li a:hover 이명령문 한번으로 전체적인 메뉴바 이미지가 롤오버 됩니다 ...

근대 전 이 코드를 따라하면서 연습했는데요 ..제가할대는 #navi li a:hover 동일하게 했는데

전혀 롤오버가 먹지를 않습니다 그래서 ul도 해봤는데 전혀 반응이 없구요 ...

그래서 #navi#menu1 a:hover하니먹히더군요 ..원래 ulli했을때도 동일하게 롤오버 되야하지 않나요 ??

제가연습한 코드 밑에 올렸습니다 확인해보시고 틀린게 있으면 따끔하게 지적좀 바랍니당 ㅡㅜ

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titleUntitled Document/title
style type=text/css
* {margin:0px; padding:0px}
ul {list-style:none}
a {text-decoration:none}
body {background:url(images/M_bg.gif) repeat-x 0 50px}
#gnb {margin:auto; width:900px}
#gnb ul {float:left; margin-top:50px}
#gnb li {float:left}
#gnb a {display:block; width:150px; height:35px; text-indent:-9999px}
#gnb #menu1 a{background:url(images/MM_Intro.gif)}
#gnb #menu2 a{background:url(images/MM_Share.gif)}
#gnb #menu3 a{background:url(images/MM_Join.gif)}
#gnb #menu4 a{background:url(images/MM_Story.gif)}
#gnb #menu5 a{background:url(images/MM_Event.gif)}
#gnb #menu6 a{background:url(images/MM_Comm.gif)}
#gnb #menu1 a:hover{background-position:left bottom}
#gnb #menu2 a:hover{background-position:left bottom}
#gnb #menu3 a:hover{background-position:left bottom}
#gnb #menu4 a:hover{background-position:left bottom}
#gnb #menu5 a:hover{background-position:left bottom}
#gnb #menu6 a:hover{background-position:left bottom}
/style

/head
body
div id=gnb
ul
li id=menu1a href=#menu/a/li
li id=menu2a href=#menu/a/li
li id=menu3a href=#menu/a/li
li id=menu4a href=#menu/a/li
li id=menu5a href=#menu/a/li
li id=menu6a href=#menu/a/li
/ul
/div
/body
/html

신청하기