CSS 고수님꼐 정중히 질문합니다.
본문
억지로 제작한 홈페이지를 내일 모래 납품해야하는데...
비주얼 영역 없애고 카테고리 이미지 넣고 마우스 올리면 하위카테고리 나오게 하라는데요.
음~ 지금 레이아웃에서 아무리 적용하려해도 저의 CSS실력으로는 무리네요.
입점업체와 고객센터는 레이어 필요없이 바로 접속하면 되는데 나머지 8개 카테고리가 문제네요.
지금 적용된 스타일 시트와 소스부분입니다.
아직 하위 카테고리 레이어는 작성하지 않은 상태입니다.
예를들면 쌀/잡곡 하위 카테고리는 이렇습니다. 감사합니다.
<ul>
<li><a href="<?php echo G5_SHOP_URL?>/list.php?ca_id=001001">백미</a></li>
<li><a href="<?php echo G5_SHOP_URL?>/list.php?ca_id=001002">현미</a></li>
<li><a href="<?php echo G5_SHOP_URL?>/list.php?ca_id=001003">흑미</a></li>
<li><a href="<?php echo G5_SHOP_URL?>/list.php?ca_id=001004">찹쌀</a></li>
<li><a href="<?php echo G5_SHOP_URL?>/list.php?ca_id=001005">홍화씨·깨·팥·콩류</a></li>
<li><a href="<?php echo G5_SHOP_URL?>/list.php?ca_id=001006">기타잡곡</a></li>
</ul>
1. 스타일 시트
.main_category{position:relative;width:100%;margin:10px auto;border:1px solid #bababa;}
.main_category h2{font-size:20px;color:#222;text-align:center;line-height:26px}
.main_category{height:auto;*zoom:1}
.main_category h2 strong{color:#fa6336}
.main_category:after{content:'';display:block;clear:both}
.main_category ul{float:left;width:100%;margin:0 -1px -1px -1px;*zoom:1}
.main_category ul:after{content:'';display:block;clear:both}
.main_category ul li{position: relative;float:left;width:20%}
.main_category ul li a{display:block;height:140px;border:1px solid #e5e5e5;border-width:0 1px 1px 0;border-style:solid;border-color:#e5e5e5;color:#555;text-align:center}
.main_category ul li a span.ico{display:block;position:relative;width:140px;height:70px;margin:0 auto;padding-top:20px}
.main_category ul li a span.ico img{width:140px;height:70px}
.main_category ul li a span.ico span.on{display:none;position:absolute;top:20px;left:0;width:140px;height:70px}
.main_category ul li a span.txt{display:inline-block;height:37px;line-height:37px;padding:0 10px;vertical-align:middle;}
.main_category ul li a span.txt span{display:inline-block;line-height:18px;font-size:14px}
.main_category ul li a:hover span.ico span.on, .main_category ul li a:focus span.ico span.on, .main_category ul li a.active span.ico span.on{display:block}
.main_category ul li a:hover span.txt{color:#222}
2. HTML 소스
<div class="cont_wrap mart20">
<!-- 자주찾는 카테고리 -->
<div class="main_category">
<ul>
<li>
<a href="<?php echo G5_SHOP_URL?>/list.php?ca_id=001">
<span class="ico">
<img src="<?php echo G5_IMG_URL?>/main/img_cate1_off.png" alt="쌀/잡곡">
<span class="on"><img src="<?php echo G5_IMG_URL?>/main/img_cate1_on.png" alt="쌀/잡곡 선택" /></span>
</span>
<span class="txt">
<span>쌀/잡곡</span>
</span>
</a>
</li>
<li>
<a href="<?php echo G5_SHOP_URL?>/list.php?ca_id=002">
<span class="ico">
<img src="<?php echo G5_IMG_URL?>/main/img_cate2_off.png" alt="과일/채소">
<span class="on"><img src="<?php echo G5_IMG_URL?>/main/img_cate2_on.png" alt="과일/채소 선택" /></span>
</span>
<span class="txt">
<span>과일/과채류</span>
</span>
</a>
</li>
<li>
<a href="<?php echo G5_SHOP_URL?>/list.php?ca_id=003">
<span class="ico">
<img src="<?php echo G5_IMG_URL?>/main/img_cate3_off.png" alt="채소/버섯/김치류">
<span class="on"><img src="<?php echo G5_IMG_URL?>/main/img_cate3_on.png" alt="채소/버섯/김치류 선택" /></span>
</span>
<span class="txt">
<span>채소/버섯/김치류</span>
</span>
</a>
</li>
<li>
<a href="<?php echo G5_SHOP_URL?>/list.php?ca_id=004">
<span class="ico">
<img src="<?php echo G5_IMG_URL?>/main/img_cate4_off.png" alt="건강보조식품">
<span class="on"><img src="<?php echo G5_IMG_URL?>/main/img_cate4_on.png" alt="건강보조식품 선택" /></span>
</span>
<span class="txt">
<span>건강보조식품</span>
</span>
</a>
</li>
<li>
<a href="<?php echo G5_SHOP_URL?>/list.php?ca_id=005">
<span class="ico">
<img src="<?php echo G5_IMG_URL?>/main/img_cate5_off.png" alt="축산/수산">
<span class="on"><img src="<?php echo G5_IMG_URL?>/main/img_cate5_on.png" alt="축산/수산 선택" /></span>
</span>
<span class="txt">
<span>축산/수산</span>
</span>
</a>
</li>
<li>
<a href="<?php echo G5_SHOP_URL?>/list.php?ca_id=006">
<span class="ico">
<img src="<?php echo G5_IMG_URL?>/main/img_cate6_off.png" alt="가공/장류">
<span class="on"><img src="<?php echo G5_IMG_URL?>/main/img_cate6_on.png" alt="가공/장류 선택" /></span>
</span>
<span class="txt">
<span>가공/장류</span>
</span>
</a>
</li>
<li>
<a href="<?php echo G5_SHOP_URL?>/list.php?ca_id=007">
<span class="ico">
<img src="<?php echo G5_IMG_URL?>/main/img_cate7_off.png" alt="과즙/엑기스">
<span class="on"><img src="<?php echo G5_IMG_URL?>/main/img_cate7_on.png" alt="과즙/엑기스 선택" /></span>
</span>
<span class="txt">
<span>과즙/엑기스</span>
</span>
</a>
</li>
<li>
<a href="<?php echo G5_SHOP_URL?>/list.php?ca_id=008">
<span class="ico">
<img src="<?php echo G5_IMG_URL?>/main/img_cate8_off.png" alt="씨앗/모종">
<span class="on"><img src="<?php echo G5_IMG_URL?>/main/img_cate8_on.png" alt="씨앗/모종 선택" /></span>
</span>
<span class="txt">
<span>씨앗/모종</span>
</span>
</a>
</li>
<li>
<a href="<?php echo G5_SHOP_URL?>/shoplist.php">
<span class="ico">
<img src="<?php echo G5_IMG_URL?>/main/img_cate9_off.png" alt="입점업체">
<span class="on"><img src="<?php echo G5_IMG_URL?>/main/img_cate9_on.png" alt="입점업체" /></span>
</span>
<span class="txt">
<span>입점업체</span>
</span>
</a>
</li>
<li>
<a href="<?php echo G5_BBS_URL?>/faq.php?faqcate=1">
<span class="ico">
<img src="<?php echo G5_IMG_URL?>/main/img_cate10_off.png" alt="고객센터">
<span class="on"><img src="<?php echo G5_IMG_URL?>/main/img_cate10_on.png" alt="고객센터" /></span>
</span>
<span class="txt">
<span>고객센터</span>
</span>
</a>
</li>
</ul>
</div>
<!-- 자주찾는 카테고리 끝 -->
</div>
답변 3
이부분은 CSS 가 문제가 아니라 상위 메뉴 hover 시 jquery 로 액션이 일어나서 하위 메뉴의 display 를 show, hide시켜야 하는 부분으로 보여집니다.
이 공간은 css로 뭘 어찌 할수 없을것 같은데요?