div 질문좀 드릴게요 정보
div 질문좀 드릴게요본문
드롭메뉴를 만들었는데 지금 세로로 나와요 그런데 가로로 나오게 하고싶어서요..
css를 암만건들여도 가로로 못바꾸겠어요.... 소스랑 사이트 첨부할게요 ㅠㅠ.......
제발알려주세요 ㅠㅠ
http://leewb1005.dothome.co.kr/tinydropdown2/index.html#
<!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=euc-kr" />
<title>TinyDropdown 2 - animated javascript dropdown</title>
<link rel="stylesheet" href="tinydropdown.css" type="text/css" />
<script type="text/javascript" src="tinydropdown.js"></script>
</script>
<div class="nav">
<ul id="menu" class="menu">
<li class="nodiv"><a href="#"><!--<img src="/tinydropdown2/logo.gif">-->한국떡집</a></li>
<li><a href="#">한국떡집</a>
<ul>
<li><a href="#">떡집소개</a></li>
<li><a href="#">경영이념</a></li>
<li> <a href="#">오시는길</a></li>
</ul>
</li>
<li><span>제품소개</span>
<ul>
<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>
<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>
<li><a href="#">이벤트</a></li>
</ul>
</li>
<li><a href="#">떡이야기</a>
<ul>
<li><a href="#">떡의종류</a></li>
<li><a href="#">월별 떡먹는날</a></li>
<li><a href="#">떡맛있게 먹는방법</a></li>
</ul>
</li>
<li><a href="#">제휴혜택</a>
<ul>
<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>
<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>
<li><a href="#">이벤트</a></li>
</ul>
</li>
<li><a href="#">고객센터</a>
<ul>
<li><a href="#">공지사항</a></li>
<li><a href="#">자주묻는질문</a></li>
<li><a href="#">고객게시판</a></li>
</ul>
</li>
<li><a href="#">매장에서는?</a>
<ul>
<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>
<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>
<li><a href="#">이벤트</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
var dropdown=new TINY.dropdown.init("dropdown", {id:'menu', active:'menuhover'});
</script>
</body>
</html>
/* css * /
* {margin:0; padding:0; outline:0}
.nav {height:36px; background:#aaa; color:#fff; text-shadow:1px 1px #888; z-index:1000}
.menu a {float:left; color:#eee; text-decoration:none; width:120px; height:28px; padding-top:8px}
.menu span {float:left; color:#eee; text-decoration:none; width:120px; height:28px; padding-top:8px}
.menu a:hover {color:#fff}
.menu { list-style:none; font:16px Arial,Verdana; text-align:center; width:1000px; margin:0 auto}
.menu li {position:relative; float:left; width:120px;}
.menu ul {display:none; position:absolute; font:normal 13px Arial,Verdana; top:36px; left:0; background:#aaa; display:none; list-style:none}
.menu ul li {float:left; border-top:1px solid #ccc; width:120px}
.menu ul li a, li.menuhover li a, li.menuhover li.menuhover li a {float:left; display:block; background:none; height:22px; padding-top:5px}
.menu ul li a:hover, li.menuhover li a:hover, li.menuhover li.menuhover li a:hover {background:#999; color:#fff}
.menu ul li span, li.menuhover li span, li.menuhover li.menuhover li span {float:none; display:block; background:none; height:22px; padding-top:5px}
.menu ul ul {left:120px; top:0}
.menu li.submenu {font-weight:bold}
.menu li.noborder {border-top:none}
li.menuhover a, li.menuhover li.menuhover a {color:#fff; background:#999}
li.menuhover span, li.menuhover li.menuhover span {color:#fff; background:#999}
ㅠㅠ 가로로 만들고 싶어요 서브 메뉴를...
css를 암만건들여도 가로로 못바꾸겠어요.... 소스랑 사이트 첨부할게요 ㅠㅠ.......
제발알려주세요 ㅠㅠ
http://leewb1005.dothome.co.kr/tinydropdown2/index.html#
<!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=euc-kr" />
<title>TinyDropdown 2 - animated javascript dropdown</title>
<link rel="stylesheet" href="tinydropdown.css" type="text/css" />
<script type="text/javascript" src="tinydropdown.js"></script>
</script>
<div class="nav">
<ul id="menu" class="menu">
<li class="nodiv"><a href="#"><!--<img src="/tinydropdown2/logo.gif">-->한국떡집</a></li>
<li><a href="#">한국떡집</a>
<ul>
<li><a href="#">떡집소개</a></li>
<li><a href="#">경영이념</a></li>
<li> <a href="#">오시는길</a></li>
</ul>
</li>
<li><span>제품소개</span>
<ul>
<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>
<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>
<li><a href="#">이벤트</a></li>
</ul>
</li>
<li><a href="#">떡이야기</a>
<ul>
<li><a href="#">떡의종류</a></li>
<li><a href="#">월별 떡먹는날</a></li>
<li><a href="#">떡맛있게 먹는방법</a></li>
</ul>
</li>
<li><a href="#">제휴혜택</a>
<ul>
<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>
<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>
<li><a href="#">이벤트</a></li>
</ul>
</li>
<li><a href="#">고객센터</a>
<ul>
<li><a href="#">공지사항</a></li>
<li><a href="#">자주묻는질문</a></li>
<li><a href="#">고객게시판</a></li>
</ul>
</li>
<li><a href="#">매장에서는?</a>
<ul>
<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>
<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>
<li><a href="#">이벤트</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
var dropdown=new TINY.dropdown.init("dropdown", {id:'menu', active:'menuhover'});
</script>
</body>
</html>
/* css * /
* {margin:0; padding:0; outline:0}
.nav {height:36px; background:#aaa; color:#fff; text-shadow:1px 1px #888; z-index:1000}
.menu a {float:left; color:#eee; text-decoration:none; width:120px; height:28px; padding-top:8px}
.menu span {float:left; color:#eee; text-decoration:none; width:120px; height:28px; padding-top:8px}
.menu a:hover {color:#fff}
.menu { list-style:none; font:16px Arial,Verdana; text-align:center; width:1000px; margin:0 auto}
.menu li {position:relative; float:left; width:120px;}
.menu ul {display:none; position:absolute; font:normal 13px Arial,Verdana; top:36px; left:0; background:#aaa; display:none; list-style:none}
.menu ul li {float:left; border-top:1px solid #ccc; width:120px}
.menu ul li a, li.menuhover li a, li.menuhover li.menuhover li a {float:left; display:block; background:none; height:22px; padding-top:5px}
.menu ul li a:hover, li.menuhover li a:hover, li.menuhover li.menuhover li a:hover {background:#999; color:#fff}
.menu ul li span, li.menuhover li span, li.menuhover li.menuhover li span {float:none; display:block; background:none; height:22px; padding-top:5px}
.menu ul ul {left:120px; top:0}
.menu li.submenu {font-weight:bold}
.menu li.noborder {border-top:none}
li.menuhover a, li.menuhover li.menuhover a {color:#fff; background:#999}
li.menuhover span, li.menuhover li.menuhover span {color:#fff; background:#999}
ㅠㅠ 가로로 만들고 싶어요 서브 메뉴를...
댓글 전체
li 에 class를 주고 display:inline; 을 적용 해 보세요...^^