드롭다운 메뉴를 만들고 있는데 li가 리스트 형식으로 안떠요~
본문
드롭다운 메뉴를 만들고 있는데 대메뉴에 롤오버 했을 시 서브메뉴가 가로로 정렬이 되네요~
서브메뉴를 리스트 형식으로 놓고 싶은데..
원래 만들고자 하는건 아래처럼 인데~ css에서 어떤 부분이 빠졌는지.. 계속 찾아봐도 영 모르겠어요~ ㅠ
도움 좀 부탁드리겠습니다~!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {font-family:돋움; font-size:12px; }
a {border:none;}
ul {margin:0; padding:0;}
li {list-style:none; display:inline; margin:0; padding:0;}
#header_navi {width:100%; height:37px; background:url(../img/all_navi_bar.gif) no-repeat; background-position:50% 50%;}
#header_navi #navi {width:1000px; height:37px; margin:0 auto; position:relative; }
#header_navi #navi li {float:left; }
#header_navi #navi ul .bm1 { width:140px; height:37px; background:url(../img/menu1.png) no-repeat;}
#header_navi #navi ul .bm1:hover { width:140px; height:37px; background:url(../img/menu1_over.png) no-repeat;}
#header_navi #navi ul .bm2 { width:176px; height:37px; background:url(../img/menu2.png) no-repeat;}
#header_navi #navi ul .bm2:hover { width:176px; height:37px; background:url(../img/menu2_over.png) no-repeat;}
body {font-family:돋움; font-size:12px; }
a {border:none;}
ul {margin:0; padding:0;}
li {list-style:none; display:inline; margin:0; padding:0;}
#header_navi {width:100%; height:37px; background:url(../img/all_navi_bar.gif) no-repeat; background-position:50% 50%;}
#header_navi #navi {width:1000px; height:37px; margin:0 auto; position:relative; }
#header_navi #navi li {float:left; }
#header_navi #navi ul .bm1 { width:140px; height:37px; background:url(../img/menu1.png) no-repeat;}
#header_navi #navi ul .bm1:hover { width:140px; height:37px; background:url(../img/menu1_over.png) no-repeat;}
#header_navi #navi ul .bm2 { width:176px; height:37px; background:url(../img/menu2.png) no-repeat;}
#header_navi #navi ul .bm2:hover { width:176px; height:37px; background:url(../img/menu2_over.png) no-repeat;}
#header_navi #navi ul .sub1 {display:none; position:absolute; top:36px; left:0px; border:1px solid #999; background:#fff; padding:20px 20px 20px 20px; line-height:24px;}
#header_navi #navi ul .sub2 {display:none; position:absolute; top:36px; left:141px; border:1px solid #999; background:#fff; padding:20px 20px 20px 20px; line-height:24px; }
.sub_left {float:left; padding-right:20px; border-right:1px solid #999; height:auto;}
.sub_left li {float:none;}
.sub_right li {float:none;}
.sub_right {float:right; margin-left:20px;}
#header_navi #navi ul li:hover div {display:block;}
</style>
</head>
<body>
<div id="header_navi">
<div id="navi">
<ul>
<li class="bm1">
</li>
<li class="bm2">
<div class="sub2">
<ul class="sub_left">
<li><a href="#">침대</a></li>
<li><a href="#">매트리스</a></li>
<li><a href="#">장롱 / 붙박이장</a></li>
<li><a href="#">화장대</a></li>
<li><a href="#">인테리어 의자 / 암체어</a></li>
</ul>
<ul class="sub_right">
<li><a href="#">소파</a></li>
<li><a href="#">거실(TV)장 / 장식장</a></li>
<li><a href="#">소파 / 사이드 테이블</a></li>
<li><a href="#">엔틱 / 고가구</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
<div id="header_navi">
<div id="navi">
<ul>
<li class="bm1">
</li>
<li class="bm2">
<div class="sub2">
<ul class="sub_left">
<li><a href="#">침대</a></li>
<li><a href="#">매트리스</a></li>
<li><a href="#">장롱 / 붙박이장</a></li>
<li><a href="#">화장대</a></li>
<li><a href="#">인테리어 의자 / 암체어</a></li>
</ul>
<ul class="sub_right">
<li><a href="#">소파</a></li>
<li><a href="#">거실(TV)장 / 장식장</a></li>
<li><a href="#">소파 / 사이드 테이블</a></li>
<li><a href="#">엔틱 / 고가구</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
