메뉴에 마우스를 올려놓아도 서브메뉴가 출력되지 않네요. ㅠㅠ
어떤 식으로 해결해야 할까요
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>
그러니깐 하나의 메뉴에서만 서브메뉴 뜨네요.
게시판 목록
디자인
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 766 | 13년 전 | 810 | ||
| 765 | 13년 전 | 1660 | ||
| 764 | 13년 전 | 907 | ||
| 763 | 13년 전 | 2272 | ||
| 762 | 13년 전 | 2649 | ||
| 761 | 13년 전 | 864 | ||
| 760 |
DDFACTORY
|
13년 전 | 961 | |
| 759 | 13년 전 | 1045 | ||
| 758 |
프리프리닷
|
13년 전 | 694 | |
| 757 | 13년 전 | 949 | ||
| 756 | 13년 전 | 1088 | ||
| 755 |
chongho
|
13년 전 | 3351 | |
| 754 | 13년 전 | 1372 | ||
| 753 | 13년 전 | 2240 | ||
| 752 |
 즐거운미래 |
13년 전 | 7840 | |
| 751 |
즐거운미래 |
13년 전 | 6904 | |
| 750 | 13년 전 | 1228 | ||
| 749 |
mecandoit
|
13년 전 | 1057 | |
| 748 | 13년 전 | 1468 | ||
| 747 | 13년 전 | 771 | ||
| 746 | 13년 전 | 3171 | ||
| 745 | 13년 전 | 663 | ||
| 744 |
aequum
|
13년 전 | 610 | |
| 743 | 13년 전 | 1073 | ||
| 742 | 13년 전 | 1640 | ||
| 741 | 13년 전 | 1700 | ||
| 740 | 13년 전 | 1476 | ||
| 739 |
피아노50
|
13년 전 | 1169 | |
| 738 | 13년 전 | 648 | ||
| 737 | 13년 전 | 1328 | ||
| 736 | 13년 전 | 792 | ||
| 735 | 13년 전 | 685 | ||
| 734 | 13년 전 | 739 | ||
| 733 |
 weblife |
13년 전 | 1818 | |
| 732 |
weblife |
13년 전 | 2906 | |
| 731 |
weblife |
13년 전 | 2250 | |
| 730 |
weblife |
13년 전 | 2351 | |
| 729 |
weblife |
13년 전 | 2620 | |
| 728 |
weblife |
13년 전 | 3707 | |
| 727 |
weblife |
13년 전 | 3241 | |
| 726 |
weblife |
13년 전 | 2663 | |
| 725 |
노가다의God
|
13년 전 | 575 | |
| 724 | 13년 전 | 1081 | ||
| 723 | 13년 전 | 1763 | ||
| 722 |
JBstyle
|
13년 전 | 1909 | |
| 721 |
JBstyle
|
13년 전 | 2091 | |
| 720 |
JBstyle
|
13년 전 | 1653 | |
| 719 |
dsrealad
|
13년 전 | 638 | |
| 718 |
원시인교주
|
13년 전 | 1194 | |
| 717 |
원시인교주
|
13년 전 | 1058 | |
| 716 | 13년 전 | 1005 | ||
| 715 | 13년 전 | 825 | ||
| 714 | 13년 전 | 589 | ||
| 713 | 13년 전 | 3504 | ||
| 712 | 13년 전 | 711 | ||
| 711 | 13년 전 | 2128 | ||
| 710 | 13년 전 | 1947 | ||
| 709 | 13년 전 | 1050 | ||
| 708 |
한번잘해보자
|
13년 전 | 687 | |
| 707 |
스누피사랑
|
13년 전 | 1054 | |
| 706 | 13년 전 | 2574 | ||
| 705 |
minini
|
13년 전 | 2390 | |
| 704 | 13년 전 | 984 | ||
| 703 | 13년 전 | 616 | ||
| 702 | 13년 전 | 1243 | ||
| 701 | 13년 전 | 1115 | ||
| 700 | 13년 전 | 3779 | ||
| 699 | 13년 전 | 2157 | ||
| 698 | 13년 전 | 869 | ||
| 697 | 13년 전 | 628 | ||
| 696 | 13년 전 | 1687 | ||
| 695 | 13년 전 | 1256 | ||
| 694 | 13년 전 | 2554 | ||
| 693 | 13년 전 | 3283 | ||
| 692 | 13년 전 | 1782 | ||
| 691 |
JBstyle
|
13년 전 | 870 | |
| 690 | 13년 전 | 737 | ||
| 689 |
cula100jak
|
13년 전 | 571 | |
| 688 | 13년 전 | 1393 | ||
| 687 |
mecandoit
|
13년 전 | 2043 | |
| 686 | 13년 전 | 2527 | ||
| 685 | 13년 전 | 873 | ||
| 684 | 13년 전 | 2535 | ||
| 683 |
 MH코리아 |
13년 전 | 2962 | |
| 682 | 13년 전 | 2273 | ||
| 681 | 13년 전 | 5438 | ||
| 680 | 13년 전 | 3970 | ||
| 679 | 13년 전 | 1566 | ||
| 678 |
 iwebstory |
13년 전 | 645 | |
| 677 |
iwebstory |
13년 전 | 585 | |
| 676 | 13년 전 | 2391 | ||
| 675 | 13년 전 | 2289 | ||
| 674 | 13년 전 | 2386 | ||
| 673 | 13년 전 | 1630 | ||
| 672 | 13년 전 | 849 | ||
| 671 |
한번잘해보자
|
13년 전 | 564 | |
| 670 |
eunga
|
13년 전 | 862 | |
| 669 |
NousKing
|
13년 전 | 701 | |
| 668 | 13년 전 | 782 | ||
| 667 | 13년 전 | 740 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기