CSS 고수님꼐 정중히 질문합니다. 채택완료

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

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

음~ 지금 레이아웃에서 아무리 적용하려해도 저의 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 소스