그누보드 QA - CSS 고수님꼐 정중히 질문합니다.

CSS 고수님꼐 정중히 질문합니다.

컴대장 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2019.09.17 22:20:42 조회 1916 (121.♡.♡.174)

본문

억지로 제작한 홈페이지를 내일 모래 납품해야하는데...

비주얼 영역 없애고 카테고리 이미지 넣고 마우스 올리면 하위카테고리 나오게 하라는데요.

음~ 지금 레이아웃에서 아무리 적용하려해도 저의 CSS실력으로는 무리네요.

입점업체와 고객센터는 레이어 필요없이 바로 접속하면 되는데 나머지 8개 카테고리가 문제네요.

지금 적용된 스타일 시트와 소스부분입니다.

아직 하위 카테고리 레이어는 작성하지 않은 상태입니다.

예를들면 쌀/잡곡 하위 카테고리는 이렇습니다. 감사합니다.

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">
 
 <img src="<?php echo G5_IMG_URL?>/main/img_cate1_off.png" alt="쌀/잡곡">
 <img src="<?php echo G5_IMG_URL?>/main/img_cate1_on.png" alt="쌀/잡곡 선택" />
 
 
 쌀/잡곡
 
 </a>
 </li>
 <li>
 <a href="<?php echo G5_SHOP_URL?>/list.php?ca_id=002">
 
 <img src="<?php echo G5_IMG_URL?>/main/img_cate2_off.png" alt="과일/채소">
 <img src="<?php echo G5_IMG_URL?>/main/img_cate2_on.png" alt="과일/채소 선택" />
 
 
 과일/과채류
 
 </a>
 </li>
 <li>
 <a href="<?php echo G5_SHOP_URL?>/list.php?ca_id=003">
 
 <img src="<?php echo G5_IMG_URL?>/main/img_cate3_off.png" alt="채소/버섯/김치류">
 <img src="<?php echo G5_IMG_URL?>/main/img_cate3_on.png" alt="채소/버섯/김치류 선택" />
 
 
 채소/버섯/김치류
 
 </a>
 </li>
 <li>
 <a href="<?php echo G5_SHOP_URL?>/list.php?ca_id=004">
 
 <img src="<?php echo G5_IMG_URL?>/main/img_cate4_off.png" alt="건강보조식품">
 <img src="<?php echo G5_IMG_URL?>/main/img_cate4_on.png" alt="건강보조식품 선택" />
 
 
 건강보조식품
 
 </a>
 </li>
 <li>
 <a href="<?php echo G5_SHOP_URL?>/list.php?ca_id=005">
 
 <img src="<?php echo G5_IMG_URL?>/main/img_cate5_off.png" alt="축산/수산">
 <img src="<?php echo G5_IMG_URL?>/main/img_cate5_on.png" alt="축산/수산 선택" />
 
 
 축산/수산
 
 </a>
 </li>
 <li>
 <a href="<?php echo G5_SHOP_URL?>/list.php?ca_id=006">
 
 <img src="<?php echo G5_IMG_URL?>/main/img_cate6_off.png" alt="가공/장류">
 <img src="<?php echo G5_IMG_URL?>/main/img_cate6_on.png" alt="가공/장류 선택" />
 
 
 가공/장류
 
 </a>
 </li>
 <li>
 <a href="<?php echo G5_SHOP_URL?>/list.php?ca_id=007">
 
 <img src="<?php echo G5_IMG_URL?>/main/img_cate7_off.png" alt="과즙/엑기스">
 <img src="<?php echo G5_IMG_URL?>/main/img_cate7_on.png" alt="과즙/엑기스 선택" />
 
 
 과즙/엑기스
 
 </a>
 </li>
 <li>
 <a href="<?php echo G5_SHOP_URL?>/list.php?ca_id=008">
 
 <img src="<?php echo G5_IMG_URL?>/main/img_cate8_off.png" alt="씨앗/모종">
 <img src="<?php echo G5_IMG_URL?>/main/img_cate8_on.png" alt="씨앗/모종 선택" />
 
 
 씨앗/모종
 
 </a>
 </li>
 <li>
 <a href="<?php echo G5_SHOP_URL?>/shoplist.php">
 
 <img src="<?php echo G5_IMG_URL?>/main/img_cate9_off.png" alt="입점업체">
 <img src="<?php echo G5_IMG_URL?>/main/img_cate9_on.png" alt="입점업체" />
 
 
 입점업체
 
 </a>
 </li>
 <li>
 <a href="<?php echo G5_BBS_URL?>/faq.php?faqcate=1">
 
 <img src="<?php echo G5_IMG_URL?>/main/img_cate10_off.png" alt="고객센터">
 <img src="<?php echo G5_IMG_URL?>/main/img_cate10_on.png" alt="고객센터" />
 
 
 고객센터
 
 </a>
 </li>
 </ul>
</div>

</div>