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

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

· 9년 전 · 350 · 2

 

 

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

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

 

 

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개

9년 전
이렇게 하시면 될것같습니다.

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

게시글 목록

번호 제목
9372
3068
3065
3061
3047
3043
3037
3028
9362
3014
3009
3007
9360
9358
9355
9354
3004
9349
9340
9338
9335
3000
9334
9333
2997
2992
2985
2980
9331
2976
2969
6947
2959
9307
2956
6945
2951
2948
9296
2944
9279
9276
9265
6936
9261
9256
게시판 숲시안 4
6934
9254
9242
9238
9232
2938
9216
2927
2923
2919
2911
2909
9207
외부로그인 로그인입니다. 8
2907
2906
9203
2905
2904
9194
2899
9189
9186
2892
2889
6929
2877
2865
9182
9176
9169
9164
2864
9162
2857
9156
2850
9151
회원통합스킨 로그인페이지 4
5971
9145
9132
9119
9113
9107
외부로그인 로그인 페이지 5
9096
9088
9049
2842
2837
2836
9037
9034
2833
2832
2829