테스트 사이트 - 개발 중인 베타 버전입니다

서브메뉴 관련 디자인 질문있습니다.

 

 

메뉴에 마우스를 올려놓아도 서브메뉴가 출력되지 않네요. ㅠㅠ

어떤 식으로 해결해야 할까요  

 

 

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>
묶었는데 뭐랄까, 만약 home 구인/구직 렌트/쉐어 이 부분에서 구인/구직 렌트/쉐어에 서브메뉴를 넣었다면 구인/구직에 마우스 오버시 메뉴가 안뜨고, 렌트/쉐어에 마우스 오버시 렌트/쉐어의 서브메뉴가 뜹니다.
그러니깐 하나의 메뉴에서만 서브메뉴 뜨네요.

게시글 목록

번호 제목
9869
9863
9862
3212
3203
3194
9855
9851
9845
9843
9842
9836
9834
3192
3191
6957
9830
9825
9823
9821
9735
3186
3182
9727
9720
3179
9702
6955
3174
9690
9686
9679
3165
3162
3159
9676
3146
9673
9668
9663
9662
게시판 액자??
9581
3143
3142
9561
9554
외부로그인 로그인 스킨 6
9542
9531
9527
9522
3131
9517
회원통합스킨 블랙 메뉴 디자인 4
9507
9500
9492
9490
9489
9485
9481
회원통합스킨 메뉴 디자인 3
9480
3128
3120
9478
3116
9477
3112
9471
9470
9468
9463
9460
9457
3104
9452
6953
9448
9444
9443
5984
3094
9442
3088
3082
3079
9432
패스워드찾기 로그인 페이지 PSD 9
9416
3078
9415
9407
9405
9402
3075
9400
게시판 공지창 1
9399
3072
6949
9397
9395
9380
게시판 조직도 14
9376