메뉴에 마우스를 올려놓아도 서브메뉴가 출력되지 않네요. ㅠㅠ
어떤 식으로 해결해야 할까요
HTML 코드
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>가로 서브메뉴</title>
</head>
<body>
<nav id="topmenu">
<div class="wrap">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">구인/구직</a></li>
<div class="subMenuBox">
<ul>
<li><a href="#">전체</a></li>
<li><a href="#">파트타임</a></li>
<li><a href="#">풀타임</a></li>
<li><a href="#">농장</a></li>
</ul>
</div>
<li><a href="#">렌트/쉐어</a></li>
<div class="subMenuBox">
<ul class="subBox">
<li><a href="#">전체</a></li>
<li><a href="#">거실 쉐어</a></li>
<li><a href="#">2인 1실</a></li>
<li><a href="#">원룸</a></li>
<li><a href="#">테이크오버</a></li>
<li><a href="#">기타</a></li>
</ul>
</div>
<li><a href="#">사고팔고</a></li>
<li><a href="#">생활정보</a></li>
<li><a href="#">TV</a></li>
<li><a href="#">광고 문의</a></li>
</ul>
</div>
</nav>
</body>
</html>
CSS 코드
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); /* 나눔고딕 적용 */
body {
font-family: 'Nanum Gothic',Nanum Gothic,'나눔고딕',나눔고딕,sans-serif;
font-size: 14px;
}
ul {
list-style: none;
margin: 0px;
padding: 0px;
}
/*
############################
메뉴 관련 CSS 시작
############################
*/
#topmenu {
background: url('./bg.jpg') repeat-x 0 0;
text-align: center;
height: 73px;
}
#topmenu .wrap {
position: relative;
height: 73px;
width: 100%;
margin: 0 auto;
overflow: visible;
}
#topmenu .wrap ul {
position: relative;
margin: auto;
padding: 0;
}
#topmenu .wrap ul:after {
content: "";
display: block;
float: none;
clear: both;
}
#topmenu .wrap ul li {
float: left;
list-style: none;
margin: 0;
padding: 0;
height: 43px;
}
#topmenu .wrap ul li:hover {
background: #1c8d6f;
border-radius: 3px 3px 3px 3px;
display: block;
}
#topmenu .wrap ul li:hover ul {
display: block;
}
#topmenu .wrap ul li a {
height: 37px;
cursor: pointer;
text-decoration: none;
padding: 0 25px 5px 20px;
color: #fff;
font: normal 14px nanumgothic, dotum;
letter-spacing: 0px;
display: inline-block;
line-height: 43px;
font-weight: bold;
}
#topmenu .wrap ul li.active {
background: #1c8d6f;
border-radius: 3px 3px 3px 3px;
}
#topmenu .wrap ul li a:hover {
color:#000;
}
/*
############################
서브메뉴 시작
############################
*/
#topmenu .wrap div.subMenuBox {
display: inline-block;
position: absolute;
margin: 0;
padding: 0;
float: left;
left: 0;
top: 43px;
height: 30px;
width: 100%;
background: url('./bg_sub.jpg') repeat-x 0 0;
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
z-index:200;
}
#topmenu .wrap div.subMenuBox ul {
margin: 0;
display: none;
z-index: 999;
}
#topmenu .wrap div.subMenuBox ul li {
margin: 0;
padding: 0;
background: url('/bg_sub.jpg') repeat-x 0 0;
height: 30px;
}
#topmenu .wrap div.subMenuBox ul li a {
margin: 0;
padding: 0 12px;
font: 11px;
letter-spacing: -1px;
color:#1c8d6f;
height: 30px;
line-height:32px;
display: inline-block;
}
댓글 2개
[code]
<li><a href="#">렌트/쉐어</a>
<div class="subMenuBox">
<ul class="subBox">
<li><a href="#">전체</a></li>
<li><a href="#">거실 쉐어</a></li>
<li><a href="#">2인 1실</a></li>
<li><a href="#">원룸</a></li>
<li><a href="#">테이크오버</a></li>
<li><a href="#">기타</a></li>
</ul>
</div>
</li>
[/code]
아래처럼 <li>태그로 묶어주시면 될것같습니다.
<li><a>렌트</a>
서브메뉴내용
</li>
게시글 목록
| 번호 | 제목 |
|---|---|
| 9372 |
게시판
게시판스킨 리스트
3
|
| 3068 | |
| 3065 | |
| 3061 | |
| 3047 | |
| 3043 | |
| 3037 | |
| 3028 | |
| 9362 |
쪽지
쪽지페이지입니다.
9
|
| 3014 | |
| 3009 | |
| 3007 | |
| 9360 | |
| 9358 | |
| 9355 |
회원통합스킨
로그인 페이지 입니다.
2
|
| 9354 |
설문조사
설문조사입니다.
|
| 3004 | |
| 9349 |
갤러리
갤러리입니다.
4
|
| 9340 |
게시판
조직도입니다.
8
|
| 9338 |
게시판
레드계열 게시판입니다.
1
|
| 9335 |
접속자
접속자 시안입니다.
2
|
| 3000 | |
| 9334 | |
| 9333 |
갤러리
배너 하나 올려요
|
| 2997 | |
| 2992 | |
| 2985 | |
| 2980 | |
| 9331 |
게시판
배너 올려요
1
|
| 2976 | |
| 2969 | |
| 6947 | |
| 2959 | |
| 9307 |
달력
온라인 예약 스킨
23
|
| 2956 | |
| 6945 | |
| 2951 | |
| 2948 | |
| 9296 | |
| 2944 | |
| 9279 |
게시판
쇼핑몰 메인시안 입니다.
16
|
| 9276 |
회원통합스킨
로그인 시안 입니다.
2
|
| 9265 |
게시판
운세시안
10
|
| 6936 | |
| 9261 |
게시판
약품시안
3
|
| 9256 |
게시판
숲시안
4
|
| 6934 | |
| 9254 |
외부로그인
로그인 시안 입니다.
1
|
| 9242 |
게시판
펜션 psd 올려요
11
|
| 9238 | |
| 9232 | |
| 2938 | |
| 9216 |
최신글
음식점 시안 공유합니다.
15
|
| 2927 | |
| 2923 | |
| 2919 | |
| 2911 | |
| 2909 | |
| 9207 |
외부로그인
로그인입니다.
8
|
| 2907 | |
| 2906 | |
| 9203 | |
| 2905 | |
| 2904 | |
| 9194 |
외부로그인
그냥 심플한 로그인 화면입니다.
8
|
| 2899 | |
| 9189 | |
| 9186 |
외부로그인
제나플러스 외부로그인입니다..
2
|
| 2892 | |
| 2889 | |
| 6929 | |
| 2877 | |
| 2865 | |
| 9182 |
외부로그인
로그인 페이지입니다.
3
|
| 9176 | |
| 9169 |
달력
자료실 팝업창입니다
6
|
| 9164 |
외부로그인
로그인 파일입니다.
4
|
| 2864 | |
| 9162 |
외부로그인
주황 로그인 페이지
1
|
| 2857 | |
| 9156 |
외부로그인
로그인 디자인입니다.
5
|
| 2850 | |
| 9151 |
회원통합스킨
로그인페이지
4
|
| 5971 | |
| 9145 |
폼메일
회원가입 폼메일입니다.
5
|
| 9132 | |
| 9119 |
폼메일
전체메일보낼때 시안
12
|
| 9113 | |
| 9107 |
외부로그인
로그인 페이지
5
|
| 9096 |
전체검색
메인 시안(로그인 및 여러개)
10
|
| 9088 |
외부로그인
저도 로그인 디자인 하나 올립니다.
7
|
| 9049 |
외부로그인
아웃로그인 스킨 올려봅니다.
5
|
| 2842 | |
| 2837 | |
| 2836 | |
| 9037 | |
| 9034 | |
| 2833 | |
| 2832 | |
| 2829 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기