서브메뉴 관련 디자인 질문있습니다.
메뉴에 마우스를 올려놓아도 서브메뉴가 출력되지 않네요. ㅠㅠ
어떤 식으로 해결해야 할까요
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>
그러니깐 하나의 메뉴에서만 서브메뉴 뜨네요.
게시글 목록
| 번호 | 제목 |
|---|---|
| 5914 | |
| 2012 | |
| 7985 |
외부로그인
로그인창 시안입니다
2
|
| 2008 | |
| 7984 |
기타
팝업 테두리 입니다.
|
| 2000 | |
| 1977 | |
| 5909 | |
| 7969 | |
| 1968 | |
| 7959 |
기타
탭 스타일 모음 4
9
|
| 7952 |
기타
탭 스타일 모음 3
6
|
| 7946 |
기타
탭 스타일 모음 2
5
|
| 7940 |
기타
탭 스타일 모음 1
5
|
| 7933 |
기타
픽셀아이콘 모음 3
6
|
| 7918 |
기타
버튼 모음 2
14
|
| 7906 |
기타
버튼 모음 1
11
|
| 7902 |
기타
픽셀아이콘 모음 2
3
|
| 7898 |
기타
픽셀아이콘 모음 1
3
|
| 7896 |
기타
팝업 디자인
1
|
| 1965 | |
| 1956 | |
| 7892 |
기타
메인시안입니다.
3
|
| 1946 | |
| 1940 | |
| 1938 | |
| 1932 | |
| 7881 | |
| 7877 | |
| 7876 |
기타
무료 아이콘 팩입니다
|
| 7874 |
기타
무료 아이콘 입니다
1
|
| 7872 | |
| 1923 | |
| 7871 |
일반
간단한 팝업 디자인 ^
|
| 7861 | |
| 7860 |
기타
메뉴 psd
|
| 1916 | |
| 7854 |
기타
메인디자인 시안
5
|
| 7847 |
기타
사용방법 디자인
6
|
| 1905 | |
| 5896 | |
| 7845 | |
| 1892 | |
| 7834 | |
| 7822 | |
| 1871 | |
| 7814 | |
| 1866 | |
| 7808 |
기타
아이콘과 UI관련
5
|
| 5895 | |
| 1856 | |
| 5888 | |
| 7803 | |
| 1852 | |
| 5884 | |
| 7778 | |
| 7766 | |
| 7764 | |
| 7761 |
기타
회원가입버튼
2
|
| 1838 | |
| 1831 | |
| 7742 | |
| 5883 | |
| 5881 | |
| 5880 | |
| 5873 | |
| 1822 | |
| 7738 | |
| 7732 |
기타
배경 이미지~
5
|
| 7723 | |
| 7721 | |
| 6854 | |
| 7708 |
기타
리본 시안입니다
12
|
| 6849 | |
| 6844 | |
| 7705 | |
| 1819 | |
| 1815 | |
| 1810 | |
| 1807 | |
| 5862 | |
| 1797 | |
| 1765 | |
| 6841 | |
| 1756 | |
| 5846 | |
| 1746 | |
| 1724 | |
| 1715 | |
| 1711 | |
| 1698 | |
| 5836 | |
| 1695 | |
| 1694 | |
| 1692 | |
| 1685 | |
| 1677 | |
| 1670 | |
| 1663 | |
| 1656 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기