메뉴에 마우스를 올려놓아도 서브메뉴가 출력되지 않네요. ㅠㅠ
어떤 식으로 해결해야 할까요
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>
게시글 목록
| 번호 | 제목 |
|---|---|
| 10407 | |
| 10406 | |
| 10395 | |
| 10392 | |
| 7022 | |
| 10389 | |
| 10386 | |
| 3939 | |
| 7021 | |
| 10384 | |
| 10379 | |
| 3931 | |
| 7019 | |
| 7016 | |
| 7014 | |
| 7010 | |
| 5991 | |
| 7007 | |
| 7003 | |
| 7000 | |
| 6998 | |
| 11233 | |
| 6995 | |
| 3930 | |
| 3928 | |
| 3918 | |
| 10365 | |
| 10361 | |
| 3909 | |
| 3906 | |
| 6994 | |
| 3900 | |
| 10357 | |
| 3893 | |
| 10326 | |
| 3888 | |
| 3884 | |
| 3877 | |
| 3874 | |
| 3868 | |
| 10307 | |
| 3863 | |
| 3861 | |
| 3847 | |
| 10304 | |
| 3842 | |
| 3839 | |
| 3832 | |
| 6991 | |
| 3831 | |
| 10302 | |
| 10281 | |
| 10279 | |
| 6988 | |
| 3815 |
디자이너
이미테이션의 유혹..? 강요?
15
|
| 10274 | |
| 3787 | |
| 3771 | |
| 3765 | |
| 3751 | |
| 3747 |
디자이너
이 폰트 뭔지 아시는 분~~?
3
|
| 3742 |
디자이너
S-MAC을 소개합니다.
4
|
| 3734 | |
| 10269 | |
| 3721 | |
| 3711 |
디자이너
홈페이지가 해외에서 열리게 하려면
9
|
| 3702 |
디자이너
오늘 하루종일 한거
8
|
| 3681 |
디자이너
예전에 그렸던 그림들...
20
|
| 3678 |
디자이너
디개기뻐라니 기발하네요 ㅋㅋ
2
|
| 3668 | |
| 10263 | |
| 10164 | |
| 3661 |
디자이너
아.. 메인디자인 들어갈때..
6
|
| 3652 | |
| 3642 |
디자이너
바보 인증하는 앱등이들 광고
9
|
| 3638 | |
| 3625 | |
| 3601 | |
| 3583 | |
| 3575 |
디자이너
이거 디자인 예쁘지 않나요?
7
|
| 10162 | |
| 3569 | |
| 3559 | |
| 3556 | |
| 3548 | |
| 3542 | |
| 10160 |
최신글
공지사항
1
|
| 10153 | |
| 3539 | |
| 3534 | |
| 3519 | |
| 3515 | |
| 3510 | |
| 3500 | |
| 3485 |
디자이너
웹디자인 레이아웃 사이드바 정렬
14
|
| 6985 | |
| 11230 | |
| 3304 | |
| 11220 | |
| 9043 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기