메뉴에 마우스를 올려놓아도 서브메뉴가 출력되지 않네요. ㅠㅠ
어떤 식으로 해결해야 할까요
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>
그러니깐 하나의 메뉴에서만 서브메뉴 뜨네요.
게시판 목록
디자인
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 1866 | 9년 전 | 81 | ||
| 1865 | 9년 전 | 120 | ||
| 1864 | 9년 전 | 139 | ||
| 1863 | 9년 전 | 113 | ||
| 1862 |
크레용웍스
|
9년 전 | 344 | |
| 1861 | 9년 전 | 258 | ||
| 1860 | 9년 전 | 205 | ||
| 1859 | 9년 전 | 222 | ||
| 1858 |
 nanati |
9년 전 | 547 | |
| 1857 | 9년 전 | 356 | ||
| 1856 | 9년 전 | 237 | ||
| 1855 | 9년 전 | 248 | ||
| 1854 | 9년 전 | 485 | ||
| 1853 | 9년 전 | 305 | ||
| 1852 |
 weblife |
9년 전 | 484 | |
| 1851 | 9년 전 | 256 | ||
| 1850 | 9년 전 | 239 | ||
| 1849 | 9년 전 | 247 | ||
| 1848 | 9년 전 | 185 | ||
| 1847 | 9년 전 | 177 | ||
| 1846 | 9년 전 | 209 | ||
| 1845 | 9년 전 | 430 | ||
| 1844 | 9년 전 | 350 | ||
| 1843 | 9년 전 | 474 | ||
| 1842 | 9년 전 | 405 | ||
| 1841 | 9년 전 | 281 | ||
| 1840 | 9년 전 | 595 | ||
| 1839 | 9년 전 | 670 | ||
| 1838 | 9년 전 | 468 | ||
| 1837 | 9년 전 | 356 | ||
| 1836 | 9년 전 | 453 | ||
| 1835 | 9년 전 | 797 | ||
| 1834 | 9년 전 | 761 | ||
| 1833 | 9년 전 | 517 | ||
| 1832 | 9년 전 | 563 | ||
| 1831 | 9년 전 | 593 | ||
| 1830 | 9년 전 | 660 | ||
| 1829 | 9년 전 | 589 | ||
| 1828 | 9년 전 | 773 | ||
| 1827 | 9년 전 | 652 | ||
| 1826 | 9년 전 | 416 | ||
| 1825 |
 apfhd |
9년 전 | 618 | |
| 1824 | 9년 전 | 425 | ||
| 1823 | 9년 전 | 1183 | ||
| 1822 | 9년 전 | 935 | ||
| 1821 | 9년 전 | 878 | ||
| 1820 | 9년 전 | 938 | ||
| 1819 |
 Net디자인 |
9년 전 | 469 | |
| 1818 | 9년 전 | 569 | ||
| 1817 |
아쿠아틴티드
|
9년 전 | 551 | |
| 1816 |
nanati |
9년 전 | 942 | |
| 1815 |
핫디자인1
|
9년 전 | 1048 | |
| 1814 | 9년 전 | 516 | ||
| 1813 |
핫디자인1
|
9년 전 | 633 | |
| 1812 |
핫디자인1
|
9년 전 | 826 | |
| 1811 |
nanati |
9년 전 | 898 | |
| 1810 | 9년 전 | 672 | ||
| 1809 | 9년 전 | 784 | ||
| 1808 | 9년 전 | 814 | ||
| 1807 | 9년 전 | 657 | ||
| 1806 |
jakeeeeel
|
9년 전 | 600 | |
| 1805 | 9년 전 | 1485 | ||
| 1804 | 9년 전 | 831 | ||
| 1803 | 9년 전 | 833 | ||
| 1802 | 9년 전 | 1072 | ||
| 1801 |
seul194
|
9년 전 | 757 | |
| 1800 |
nanati |
9년 전 | 1021 | |
| 1799 | 9년 전 | 771 | ||
| 1798 |
nanati |
9년 전 | 1153 | |
| 1797 | 9년 전 | 1285 | ||
| 1796 |
brucelee1973
|
9년 전 | 2512 | |
| 1795 | 9년 전 | 719 | ||
| 1794 |
nanati |
9년 전 | 686 | |
| 1793 |
프로그래머7
|
9년 전 | 576 | |
| 1792 | 9년 전 | 564 | ||
| 1791 |
weblife |
9년 전 | 1561 | |
| 1790 |
ssir1159
|
9년 전 | 1252 | |
| 1789 | 9년 전 | 1061 | ||
| 1788 |
프로그래머7
|
9년 전 | 780 | |
| 1787 | 9년 전 | 532 | ||
| 1786 | 9년 전 | 635 | ||
| 1785 |
 booly |
9년 전 | 680 | |
| 1784 | 9년 전 | 767 | ||
| 1783 | 9년 전 | 619 | ||
| 1782 | 9년 전 | 399 | ||
| 1781 |
씨에이치넷
|
9년 전 | 1597 | |
| 1780 | 9년 전 | 855 | ||
| 1779 | 9년 전 | 903 | ||
| 1778 |
 별을따는소년 |
9년 전 | 1256 | |
| 1777 | 9년 전 | 656 | ||
| 1776 | 10년 전 | 1023 | ||
| 1775 | 10년 전 | 461 | ||
| 1774 | 10년 전 | 723 | ||
| 1773 |
 ABC디자인 |
10년 전 | 1459 | |
| 1772 | 10년 전 | 866 | ||
| 1771 | 10년 전 | 840 | ||
| 1770 |
ABC디자인 |
10년 전 | 1711 | |
| 1769 |
ABC디자인 |
10년 전 | 1447 | |
| 1768 |
헤이하치대머리
|
10년 전 | 748 | |
| 1767 |
씨에이치넷
|
10년 전 | 1659 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기