메뉴에 마우스를 올려놓아도 서브메뉴가 출력되지 않네요. ㅠㅠ
어떤 식으로 해결해야 할까요
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>
그러니깐 하나의 메뉴에서만 서브메뉴 뜨네요.
게시판 목록
디자인
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 266 | 15년 전 | 728 | ||
| 265 |
terrorboys
|
15년 전 | 924 | |
| 264 |
|
15년 전 | 1575 | |
| 263 | 15년 전 | 1597 | ||
| 262 |
windday
|
15년 전 | 820 | |
| 261 |
|
15년 전 | 1090 | |
| 260 |
|
15년 전 | 828 | |
| 259 | 15년 전 | 1266 | ||
| 258 | 15년 전 | 4475 | ||
| 257 |
|
15년 전 | 1077 | |
| 256 | 15년 전 | 993 | ||
| 255 | 15년 전 | 1367 | ||
| 254 | 15년 전 | 913 | ||
| 253 | 15년 전 | 879 | ||
| 252 | 15년 전 | 3132 | ||
| 251 | 15년 전 | 958 | ||
| 250 | 15년 전 | 922 | ||
| 249 | 15년 전 | 906 | ||
| 248 | 15년 전 | 963 | ||
| 247 |
|
15년 전 | 1310 | |
| 246 | 15년 전 | 871 | ||
| 245 |
|
15년 전 | 654 | |
| 244 | 15년 전 | 1215 | ||
| 243 |
|
15년 전 | 3069 | |
| 242 |
|
15년 전 | 3245 | |
| 241 |
|
15년 전 | 3376 | |
| 240 |
|
15년 전 | 1805 | |
| 239 |
|
15년 전 | 1955 | |
| 238 | 15년 전 | 712 | ||
| 237 | 15년 전 | 1337 | ||
| 236 | 15년 전 | 752 | ||
| 235 | 15년 전 | 1435 | ||
| 234 | 15년 전 | 1308 | ||
| 233 | 15년 전 | 829 | ||
| 232 |
cncafe
|
15년 전 | 1298 | |
| 231 | 15년 전 | 883 | ||
| 230 | 15년 전 | 1585 | ||
| 229 |
|
15년 전 | 922 | |
| 228 | 15년 전 | 1102 | ||
| 227 | 15년 전 | 1750 | ||
| 226 | 15년 전 | 1155 | ||
| 225 | 15년 전 | 915 | ||
| 224 | 15년 전 | 3864 | ||
| 223 | 15년 전 | 879 | ||
| 222 | 15년 전 | 843 | ||
| 221 | 15년 전 | 1010 | ||
| 220 |
Mentor
|
15년 전 | 827 | |
| 219 | 15년 전 | 841 | ||
| 218 | 15년 전 | 712 | ||
| 217 | 15년 전 | 1968 | ||
| 216 | 15년 전 | 872 | ||
| 215 |
|
15년 전 | 828 | |
| 214 | 15년 전 | 1699 | ||
| 213 | 15년 전 | 986 | ||
| 212 | 15년 전 | 854 | ||
| 211 | 15년 전 | 681 | ||
| 210 |
|
15년 전 | 1071 | |
| 209 |
Mentor
|
15년 전 | 765 | |
| 208 | 15년 전 | 691 | ||
| 207 |
|
15년 전 | 733 | |
| 206 |
|
15년 전 | 814 | |
| 205 | 15년 전 | 946 | ||
| 204 | 15년 전 | 1159 | ||
| 203 | 15년 전 | 981 | ||
| 202 | 15년 전 | 2687 | ||
| 201 |
|
15년 전 | 839 | |
| 200 | 15년 전 | 919 | ||
| 199 | 15년 전 | 931 | ||
| 198 | 15년 전 | 978 | ||
| 197 | 15년 전 | 916 | ||
| 196 |
티즈코리아
|
15년 전 | 1167 | |
| 195 | 15년 전 | 847 | ||
| 194 | 15년 전 | 1120 | ||
| 193 |
|
15년 전 | 1301 | |
| 192 |
storm1
|
15년 전 | 935 | |
| 191 | 15년 전 | 4582 | ||
| 190 |
Mentor
|
15년 전 | 1066 | |
| 189 | 15년 전 | 1044 | ||
| 188 | 15년 전 | 5217 | ||
| 187 |
|
15년 전 | 1250 | |
| 186 |
네오애드컴
|
15년 전 | 1985 | |
| 185 |
Mentor
|
15년 전 | 1370 | |
| 184 |
|
15년 전 | 1087 | |
| 183 | 15년 전 | 918 | ||
| 182 | 15년 전 | 2668 | ||
| 181 |
dreamtonext
|
15년 전 | 1062 | |
| 180 | 15년 전 | 1163 | ||
| 179 | 15년 전 | 1034 | ||
| 178 | 15년 전 | 860 | ||
| 177 |
windday
|
15년 전 | 788 | |
| 176 |
|
15년 전 | 1064 | |
| 175 |
erevo
|
15년 전 | 1450 | |
| 174 |
erevo
|
15년 전 | 870 | |
| 173 |
erevo
|
15년 전 | 794 | |
| 172 |
erevo
|
15년 전 | 882 | |
| 171 |
erevo
|
15년 전 | 790 | |
| 170 |
|
15년 전 | 3272 | |
| 169 |
|
15년 전 | 2329 | |
| 168 |
|
15년 전 | 2571 | |
| 167 |
|
15년 전 | 3486 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기