결국 이렇게 글올립니다.
꽃봄
2시간 동안 머리 굴리다 안되서 여기 올립니다#gnb ul li ul이 도대체 왜 a링크가 안먹힐까요??html문제는 아닌것 같고css에서 잘못된것 같은데어디서 잘못 된건가요??!DOCTYPE htmlhtmlhead meta http-equiv=content-type content=text/html; charset=utf-8 / title new document /title style * {margin:0; padding:0;}ul{list-style:none}a {text-decoration:none;}.text {text-indent:-99999px;}
/* skip_nav */#skip_nav a{display:block; position:absolute; left:30px; top:0; overflow:hidden; width:1px; height:1px; font-size:1em ;z-index:9999; font-weight:bold;}#skip_nav a:focus, #skip_nav a:active{ width:100px; height:auto ;padding:3px 0; background:#6487bb; color:#fff; font-size:12px; text-align:center;}/* //skip_nav */
/* warp */#wrap {width:1663px; height:920px; position:relative; }/* //warp */
/* header*/header {width:440px; height:675px; position:fixed; }header #logo a {display:block; width:220px; height:50px; background:url(../images/logo.gif); margin-top:15px;}
header #language {width:220px; height:20px; margin-top:30px; background:#ccc; }header #language li {display:inline-block; height:20px; margin-left:40px; font:10px/20px 돋움,Arial; }header #language li a {width:220px; height:20px; color:#fff;}
header #bg {width:220px; height:1000px; background:#f0f9ff; position:absolute; top:0; left:220px; }
header #gnb {width:440px; height:285px; margin-top:20px; position:relative;}header #gnb li {width:220px; line-height:70px; text-align:center; font-size:20px; letter-spacing:2px; border-bottom:1px solid #919191; }header #gnb li a{display:block; width:220px; height:70px; color:#919191; }header #gnb li a:hover {color:#40bbfb; font-weight:500; font-size:24px; background-color:#ebf5fa }header #gnb li a:active {background-color:#40bbfb; color:#fff; }header #gnb li:nth-child(1) {background-color:#40bbfb; font-size:24px; color:#000; border-top:1px solid #919191}
header #gnb .sub {display:block; width:219px; height:100%; position:absolute; top:0; left:220px;background:#f0f9ff; border-right:1px solid #ccc; }header #gnb .sub li {height:40px; text-align:center; border-bottom:1px solid #ccc; line-height:40px; color:#919191 }header #gnb .sub li a {display:block; width:219px; height:40px; color:#1948d1; font-size:14px;}header #gnb .sub li a:hover {background:#fff; font-size:16px; font-weight:500; color:#40bbfb; border-right:1px solid #ccc;}
header #gnb .sub li .hover {display:none}
/* subul */
header #sub_gnb li.sub1:hover .hover {}/* //subul */
/* //header */
/* container */#container { width:1223px; height:1000px; position:absolute; top:0; left:220px; box-shadow:-3px 0px 10px #ccc}#container #content {width:1223px; height:100%; margin-left:220px; }/* //container *//* footer */footer{ width:220px; height:250px; position:fixed; bottom:0;}
footer #sitelink {width:100%; height:30px; text-align:center;}footer #sitelink .site {width:150px;}footer #sitelink .button {width:40px; }
footer #link {width:100%; height:200px}footer #link li {height:15px; font-size:11px; line-height:15px; margin-bottom:2px; text-align:center; letter-spacing:1.5px;}footer #link li a {display:block; width:220px; height:15px; color:#727272;}footer #copy {width:200px; height:50px; margin:-100px 0 0 9px; font-size:12px; color:#d5d5d5; text-align:center; font-weight:800; }/* //footer */
/style/headbody !-- skip navigation-- div id=skip_nav a href=#container본문 바로가기/a a href=#gnb주메뉴 바로가기/a /div !-- //skip navigation-- !-- wrap -- div id=wrap !-- header -- header id=header !-- logo-- div id=logo class=text h1a href=#DooSan/a/h1 /div !-- // logo-- !-- language-- div id=language ul lia href=# target=_blank title=새창으로 열림ENGLISH/a/li lia href=# target=_blank title=새창으로 열림CHINESE/a/li /ul /div !-- // language-- !-- nav-- nav id=gnb ul lia href=# title=회사소개 바로가기회사소개/a !-- sub_gnb -- ul class=sub lia href=#1/a !-- sub_gnb ul1-- ul class=hover lia href=#2/a/li lia href=#2/a/li lia href=#2/a/li /ul !-- //sub_gnb ul1-- /li lia href=#1/a/li lia href=#1/a/li lia href=#1/a/li lia href=#1/a !-- sub_gnb ul 2-- ul class=hover lia href=#3/a/li lia href=#3/a/li lia href=#3/a/li lia href=#3/a/li lia href=#3/a/li /ul !-- //sub_gnb ul2-- /li lia href=#나눔과 공생/a !-- sub_gnb ul3-- ul class=hover lia href=#4/a/li lia href=#4/a/li lia href=#4/a/li /ul !-- //sub_gnb ul3-- /li lia href=#1/a/li lia href=#1/a/li /ul !-- //sub_gnb -- /li lia href=# title=사업영역 바로가기사업영역/a /li lia href=# title=홍보센터 바로가기홍보센터/a /li lia href=# title=인재채용 바로가기인재채용/a /li /ul /nav /header !-- //nav-- !-- //header -- !-- container -- div id=container div id=content /div /div !-- //container -- !-- footer -- footer id=footer div id=sitelink select name=site title=관련사이트 바로가기 선택 class=site option selected=selected관련사이트 바로가기/option /select button type=button title=새 창으로 이동 class=button이동/button /div div id=link ul pre lia href=#개인정보처리방침/a/li lia href=#윤리경영/a/li lia href=#공정거래/a/li lia href=#법적고지/a/li lia href=#이용약관/a/li /ul /div div id=copy pCOPYRIGHT (c) 2013 br / br /ALL RIGHT RESURVED./p /div /footer !-- //footer -- /div/body/html
-
늘빈
아하 고마워요 쉽게이해됫어요ㅋㅋ
-
미나
html요소들은 기본적으로 요소위에 요소를 겹쳐서 올릴수가 없어요...
그걸 가능하게 하려면 작업하신것 처럼 position을 사용해서 마치 포토샵 레이어처럼 사용합니다.
이때 포지션 속성이나 마크업순서, 버그 등에 의해 누가 위로올라갈지 결정되는데 이게 원하는대로 안나오게되는경우에 z-index가 그 순서를 정해주는 역할을 합니다.
z-index 값이 큰요소가 작은요소 위로 덮어지게되지요. 그래서 넣습니다 :) -
흰꽃
제가 잘 몰라서 그러는데요 왜헤더에 z-index 값을 넣어야되나요?
-
제미니
z-index 문제네영
#header{z-index:10;} 넣어줘 보시면 영역클릭은 되겠지요