서브메뉴 관련 디자인 질문있습니다.
메뉴에 마우스를 올려놓아도 서브메뉴가 출력되지 않네요. ㅠㅠ
어떤 식으로 해결해야 할까요
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>
그러니깐 하나의 메뉴에서만 서브메뉴 뜨네요.
게시글 목록
| 번호 | 제목 |
|---|---|
| 9869 |
회원가입
왼쪽 메뉴 두번째 공유해요.,
1
|
| 9863 |
회원가입
왼쪽 메뉴 공유해 드립니다.
5
|
| 9862 | |
| 3212 | |
| 3203 | |
| 3194 | |
| 9855 |
회원통합스킨
여행사 메인시안 입니다.
6
|
| 9851 |
회원통합스킨
펜션 서브 시안입니다.
3
|
| 9845 |
회원통합스킨
펜션 메인 시안입니다.
5
|
| 9843 | |
| 9842 | |
| 9836 | |
| 9834 | |
| 3192 | |
| 3191 | |
| 6957 | |
| 9830 |
회원통합스킨
예전에 작업했던 제안시안 입니다
3
|
| 9825 |
우편번호
오시는길 약도
4
|
| 9823 |
게시판
약도페이지입니다.
1
|
| 9821 |
게시판
약도페이지입니다.
1
|
| 9735 | |
| 3186 | |
| 3182 | |
| 9727 | |
| 9720 | |
| 3179 | |
| 9702 |
게시판
메인시안 사용하세요.
17
|
| 6955 | |
| 3174 | |
| 9690 |
게시판
메인시안 공유합니다~
11
|
| 9686 |
게시판
자동차관련 메인시안
3
|
| 9679 |
게시판
메인시안 공유합니다.
6
|
| 3165 | |
| 3162 | |
| 3159 | |
| 9676 | |
| 3146 | |
| 9673 |
게시판
심플 메인
2
|
| 9668 |
게시판
깜둥이메뉴
4
|
| 9663 |
게시판
황금(?)메탈문자?
4
|
| 9662 |
게시판
액자??
|
| 9581 |
게시판
메인시안입니다.
80
|
| 3143 | |
| 3142 | |
| 9561 | |
| 9554 |
외부로그인
로그인 스킨
6
|
| 9542 |
게시판
아이콘들..!!
11
|
| 9531 |
게시판
남성 쇼핑몰 스킨
10
|
| 9527 | |
| 9522 |
게시판
회사소개용 이미지
4
|
| 3131 | |
| 9517 |
회원통합스킨
블랙 메뉴 디자인
4
|
| 9507 | |
| 9500 | |
| 9492 | |
| 9490 |
회원가입
회원가입 블랙버전입니다.
1
|
| 9489 |
패스워드찾기
아이디/패스워드찾기 블랙버전입니다.
|
| 9485 |
설문조사
배너 한가지
3
|
| 9481 |
회원통합스킨
메뉴 디자인
3
|
| 9480 |
외부로그인
탑부분 로그인 바 디자인
|
| 3128 | |
| 3120 | |
| 9478 |
스크랩
스크랩 블랙버전입니다.
1
|
| 3116 | |
| 9477 |
설문조사
설문조사 블랙버전입니다.
|
| 3112 | |
| 9471 |
게시판
버튼psd 올려봅니다.
5
|
| 9470 |
갤러리
갤러리 블랙버전입니다.
|
| 9468 |
게시판
시안입니다.
1
|
| 9463 |
게시판
시안입니다.
4
|
| 9460 |
게시판
다른버젼
2
|
| 9457 |
게시판
시안입니다.
2
|
| 3104 | |
| 9452 | |
| 6953 | |
| 9448 |
게시판
쇼핑몰스킨입니다.
3
|
| 9444 |
게시판
쇼핑몰스킨입니다.
3
|
| 9443 |
외부로그인
로그인스킨입니다.
|
| 5984 | |
| 3094 | |
| 9442 |
접속자
접속자페이지 블랙버전입니다.
|
| 3088 | |
| 3082 | |
| 3079 | |
| 9432 |
패스워드찾기
로그인 페이지 PSD
9
|
| 9416 | |
| 3078 | |
| 9415 |
달력
달력 레드버전입니다.
|
| 9407 |
게시판
회사 홈페이지 시안
7
|
| 9405 |
외부로그인
로그인 블랙버전 두번째 올립니다.
1
|
| 9402 |
외부로그인
로그인 블랙버전입니다.
2
|
| 3075 | |
| 9400 |
게시판
공지창
1
|
| 9399 |
갤러리
배너 백그라운드 1
|
| 3072 | |
| 6949 | |
| 9397 |
스크랩
스크랩 팝업니다.
1
|
| 9395 |
패스워드찾기
패스워드찾기 팝업입니다.
1
|
| 9380 |
게시판
조직도
14
|
| 9376 |
게시판
게시판스킨 뷰
3
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기