메뉴에 마우스를 올려놓아도 서브메뉴가 출력되지 않네요. ㅠㅠ
어떤 식으로 해결해야 할까요
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>
게시글 목록
| 번호 | 제목 |
|---|---|
| 7104 | |
| 7102 | |
| 5000 | |
| 4999 | |
| 4991 | |
| 4989 | |
| 4985 | |
| 7099 | |
| 11179 |
레이아웃
습작
1
|
| 4979 | |
| 4974 | |
| 11178 | |
| 4972 | |
| 7094 | |
| 4960 | |
| 11169 | |
| 11165 | |
| 11164 | |
| 11163 | |
| 11162 | |
| 4948 | |
| 6002 | |
| 7090 | |
| 4941 | |
| 7087 | |
| 7082 | |
| 7079 | |
| 7076 | |
| 11136 |
디자인
심플메인시안
4
|
| 11158 |
디자인
팝업디자인
3
|
| 11135 | |
| 4937 | |
| 4931 | |
| 4930 | |
| 4928 | |
| 4925 | |
| 4914 | |
| 7074 | |
| 7072 | |
| 4913 | |
| 4912 | |
| 4906 | |
| 4902 | |
| 4897 | |
| 4895 | |
| 4889 | |
| 4888 | |
| 4887 | |
| 4886 | |
| 4882 | |
| 4880 | |
| 4876 | |
| 4873 | |
| 4872 | |
| 4863 | |
| 4862 | |
| 4857 | |
| 4852 | |
| 5998 | |
| 11256 | |
| 4849 | |
| 4837 | |
| 4825 | |
| 4820 | |
| 4815 | |
| 4814 | |
| 4807 | |
| 4796 | |
| 7070 | |
| 7068 | |
| 4789 | |
| 4778 | |
| 4772 | |
| 4769 | |
| 4758 | |
| 4755 | |
| 4751 | |
| 4743 | |
| 7063 | |
| 7061 | |
| 4741 | |
| 4740 | |
| 4735 | |
| 4732 | |
| 4721 | |
| 4718 | |
| 7059 | |
| 4715 | |
| 4710 | |
| 4709 | |
| 4707 | |
| 4699 | |
| 11254 | |
| 4691 | |
| 4688 | |
| 11133 | |
| 11127 | |
| 4682 | |
| 7057 | |
| 4678 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기