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

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

김태웅
프로필 보기이 회원 글보기
 · 9년 전 · 936 · 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>
김태웅
프로필 보기이 회원 글보기
 9년 전
묶었는데 뭐랄까, 만약 home 구인/구직 렌트/쉐어 이 부분에서 구인/구직 렌트/쉐어에 서브메뉴를 넣었다면 구인/구직에 마우스 오버시 메뉴가 안뜨고, 렌트/쉐어에 마우스 오버시 렌트/쉐어의 서브메뉴가 뜹니다.
그러니깐 하나의 메뉴에서만 서브메뉴 뜨네요.

게시글 목록

번호 제목
18013
PHP [알고리즘]퀵 정렬(Quick Sort)
18012
PHP php로 옥션 지마켓 11번가 쿠팡 위메프 등의 발주내역서 파일을
18011
PHP array_unique 배열중복값 제거
18010
JavaScript 콤보스타일 메뉴 입니다.
18009
JavaScript 쿠키를 이용한 레이어 공지창 입니다.
18008
JavaScript 효과있는 텍스트 틱커 입니다.
18007
PHP [알고리즘]힙 정렬(Heap Sort)
18006
PHP HTTP 인증 하기 입니다.
18005
JavaScript 외부 문서 불러오기 입니다.
18004
JavaScript 지정한 날짜까지 New 이미지를 띄워주기 입니다.
18003
MySQL Common MySQL Queries 다양한 MySQL 쿼리 예제
18002
JavaScript 메일 주소 검사하기 체크박스 입니다.
18001
JavaScript 무단링크 금지하기 입니다.
18000
PHP 간단하게 마우스,드래그,복사 등 막기 입니다.
17999
MySQL DB백업 및 복원
17998
JavaScript 페이지가 다른 사이트의 프레임에 갇히는 것을 막기 입니다.
17997
PHP 다른 사이트로 이동시 또는 창 닫을 시에 자동 로그아웃 하기 입니다.
17996
PHP PHP에 MYSQL 와 자바스크립트 연동 예제 입니다.
17995
jQuery input text 대문자만 받는 Jquery
17994
PHP 현재 페이지 URL 출력하기 입니다.
17993
JavaScript 이미지 업로드와 미리보기 입니다.
17992
JavaScript 배경음악 랜덤 재생 하기 입니다.
17991
JavaScript css 지원 여부 확인해서 다른 페이지로 이동하기 입니다.
17990
JavaScript 하부메뉴가 보였다가 숨겨졌다 하는 토글버튼 입니다.
17989
JavaScript 개별 페이지에 인덱스로 거쳐 들어오게 하기 입니다.
17988
JavaScript 랜덤으로 이미지 출력 되기 입니다.
17987
JavaScript 사용자 해상도 알아내기 입니다.
17986
JavaScript 붙여넣기 금지하기 입니다.
17985
MySQL 대소문자 데이터 조회하기
17984
JavaScript 퇴장시 팝업창 한번한 띄우기 입니다.
이전 다음
전체 목록