묻고답하기
4단 메뉴 도와주실분
2011.08.03 01:55
도저히 감이 않잡히는데요.
이걸 어떻게 레이아웃에 적용시키나요?
(이리저리 해봐도 메뉴가 겹치거나 그러는데 ㅠㅠ)
====================================================
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li>
<a href="#">CSS</a>
<ul>
<li><a href="#">Item 11</a></li>
<li><a href="#">Item 12</a></li>
<li><a href="#">Item 13</a></li>
<li><a href="#">Item 14</a></li>
</ul>
</li>
<li>
<a href="#">Graphic design</a>
<ul>
<li><a href="#">Item 21</a></li>
<li><a href="#">Item 22</a></li>
<li><a href="#">Item 23</a></li>
<li><a href="#">Item 24</a></li>
</ul>
</li>
<li>
<a href="#">Development tools</a>
<ul>
<li><a href="#">Item 31</a></li>
<li><a href="#">Item 32</a></li>
<li><a href="#">Item 33</a></li>
<li><a href="#">Item 34</a></li>
</ul>
</li>
<li>
<a href="#">Web design</a>
<ul>
<li><a href="#">Item 41</a></li>
<li><a href="#">Item 42</a></li>
<li><a href="#">Item 43</a></li>
<li><a href="#">Item 44</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Work</a>
<ul>
<li>
<a href="#">Work 1</a>
<ul>
<li>
<a href="#">Work 11</a>
<ul>
<li>
<a href="#">Work 111</a>
</li>
<li>
<a href="#">Work 112</a>
</li>
<li>
<a href="#">Work 113</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 12</a>
<ul>
<li>
<a href="#">Work 121</a>
</li>
<li>
<a href="#">Work 122</a>
</li>
<li>
<a href="#">Work 123</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 13</a>
<ul>
<li>
<a href="#">Work 131</a>
</li>
<li>
<a href="#">Work 132</a>
</li>
<li>
<a href="#">Work 133</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Work 2</a>
<ul>
<li>
<a href="#">Work 21</a>
<ul>
<li>
<a href="#">Work 211</a>
</li>
<li>
<a href="#">Work 212</a>
</li>
<li>
<a href="#">Work 213</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 22</a>
<ul>
<li>
<a href="#">Work 221</a>
</li>
<li>
<a href="#">Work 222</a>
</li>
<li>
<a href="#">Work 223</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 23</a>
<ul>
<li>
<a href="#">Work 231</a>
</li>
<li>
<a href="#">Work 232</a>
</li>
<li>
<a href="#">Work 233</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Work 3</a>
<ul>
<li>
<a href="#">Work 31</a>
<ul>
<li>
<a href="#">Work 311</a>
</li>
<li>
<a href="#">Work 312</a>
</li>
<li>
<a href="#">Work 313</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 32</a>
<ul>
<li>
<a href="#">Work 321</a>
</li>
<li>
<a href="#">Work 322</a>
</li>
<li>
<a href="#">Work 323</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 33</a>
<ul>
<li>
<a href="#">Work 331</a>
</li>
<li>
<a href="#">Work 332</a>
</li>
<li>
<a href="#">Work 333</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
댓글 1
| 글쓴이 | 제목 | 최종 글 |
|---|---|---|
| XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
| 별빛효과 |
사랑비 bgm 설치가 안되요!
[1]
 | 2009.04.28 by 넨네 |
| 허은석996 | 관리자 메뉴에서 setting문제입니다. [1] | 2009.04.28 by 넨네 |
| 손경훈267 | 1.2.1버전으로 업에이트후 화면이 안떠요 제발 도와주세요 [4] | 2009.04.28 by 손경훈267 |
| 혀기 |
captcha 사용하면 발생되는 에러... ㅡㅜ
[2]
| 2009.04.28 by 혀기 |
| 별빛효과 |
사랑비 bgm가 또 말썽입니다 (추가)
| |
| 질문 | xe로 홈페이지를 만들었는데...... [1] | 2009.04.28 by 김정훈닷컴 |
| uOne. |
[급] 글삭제가 안되요?
[2]
| 2009.04.28 by uOne. |
| 코알라park | 4월 25일 아래와 같이 질문했는데, 왜 답 안주시나요? 답변 바랍니다 | |
| 홍순만619 | 화면여백이 흰색이 싫어서 그런데요. [2] | 2009.04.28 by 홍순만619 |
| 바람의짱 | 비밀글... | |
| 블로거 | 다음블로거뉴스 추천, 자동발행 애드온은 없을까요?? | |
| 전국일등 | XE 상단파일 지정 못하나요? [1] | 2009.04.29 by 전국일등 |
| Qwiff | 로그인 사용자 출력 위젯 과 몇가지 기능안되는게...? [2] | 2009.04.29 by Qwiff |
| kajama | 스킨문의 | |
| 띰띰 | 검정스킨 사용중인데요 질문^^;; | |
| donit2 | 정상적으로 페이지가 열리지 않습니다. [1] | 2009.04.29 by PsychOcean |
| 젤루존 |
파일을 올리려고 하니깐 이런 오류가 나옵니다.
| |
| 석영 | 게시판 글쓰기가 안됩니다. [1] | 2009.04.29 by 천려일득 |
| 하얀진달래 | 업데이트 후 로그인이 안됩니다. | |
| 최영석222 | 줄줄이 배너 어디있죠? |
대충 만들어 봤습니다....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<style type="text/css">
ul.navigation-1
{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}
ul.navigation-1 li
{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }
ul.navigation-1 li a:link,
ul.navigation-1 li a:visited
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }
ul.navigation-1 li:hover a,
ul.navigation-1 li a:hover,
ul.navigation-1 li a:active
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }
ul.navigation-1 li ul.navigation-2
{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }
ul.navigation-1 li:hover ul.navigation-2
{ display:block; }
ul.navigation-1 li ul.navigation-2 li
{ width:146px; clear:left; width:146px; }
ul.navigation-1 li ul.navigation-2 li a:link,
ul.navigation-1 li ul.navigation-2 li a:visited
{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul.navigation-1 li ul.navigation-2 li:hover a,
ul.navigation-1 li ul.navigation-2 li a:active,
ul.navigation-1 li ul.navigation-2 li a:hover
{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul.navigation-1 li ul.navigation-2 li ul.navigation-3
{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }
ul.navigation-1 li ul.navigation-2 li:hover ul.navigation-3
{ display:block; }
ul.navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,
ul.navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
{ background:#b9121b; }
ul.navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,
ul.navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,
ul.navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active
{ background:#ec454e; }
ul.navigation-1 li ul.navigation-2 li ul.navigation-3 li ul.navigation-4
{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }
ul.navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover ul.navigation-4
{ display:block; }
ul.navigation-1 li ul.navigation-2 li ul.navigation-3 ul.navigation-4 li a:link,
ul.navigation-1 li ul.navigation-2 li ul.navigation-3 ul.navigation-4 li a:visited
{ background:#b9121b; }
ul.navigation-1 li ul.navigation-2 li ul.navigation-3 ul.navigation-4 li:hover a,
ul.navigation-1 li ul.navigation-2 li ul.navigation-3 ul.navigation-4 li a:hover,
ul.navigation-1 li ul.navigation-2 li ul.navigation-3 ul.navigation-4 li a:active
{ background:#ec454e; }
</style>
</head>
<body>
<ul class="navigation-1">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul class="navigation-2">
<li>
<a href="#">CSS</a>
<ul class="navigation-3">
<li><a href="#">Item 11</a></li>
<li><a href="#">Item 12</a></li>
<li><a href="#">Item 13</a></li>
<li><a href="#">Item 14</a></li>
</ul>
</li>
<li>
<a href="#">Graphic design</a>
<ul class="navigation-3">
<li><a href="#">Item 21</a></li>
<li><a href="#">Item 22</a></li>
<li><a href="#">Item 23</a></li>
<li><a href="#">Item 24</a></li>
</ul>
</li>
<li>
<a href="#">Development tools</a>
<ul class="navigation-3">
<li><a href="#">Item 31</a></li>
<li><a href="#">Item 32</a></li>
<li><a href="#">Item 33</a></li>
<li><a href="#">Item 34</a></li>
</ul>
</li>
<li>
<a href="#">Web design</a>
<ul class="navigation-3">
<li><a href="#">Item 41</a></li>
<li><a href="#">Item 42</a></li>
<li><a href="#">Item 43</a></li>
<li><a href="#">Item 44</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Work</a>
<ul class="navigation-2">
<li>
<a href="#">Work 1</a>
<ul class="navigation-3">
<li>
<a href="#">Work 11</a>
<ul class="navigation-4">
<li>
<a href="#">Work 111</a>
</li>
<li>
<a href="#">Work 112</a>
</li>
<li>
<a href="#">Work 113</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 12</a>
<ul class="navigation-4">
<li>
<a href="#">Work 121</a>
</li>
<li>
<a href="#">Work 122</a>
</li>
<li>
<a href="#">Work 123</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 13</a>
<ul class="navigation-4">
<li>
<a href="#">Work 131</a>
</li>
<li>
<a href="#">Work 132</a>
</li>
<li>
<a href="#">Work 133</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Work 2</a>
<ul class="navigation-3">
<li>
<a href="#">Work 21</a>
<ul class="navigation-4">
<li>
<a href="#">Work 211</a>
</li>
<li>
<a href="#">Work 212</a>
</li>
<li>
<a href="#">Work 213</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 22</a>
<ul class="navigation-4">
<li>
<a href="#">Work 221</a>
</li>
<li>
<a href="#">Work 222</a>
</li>
<li>
<a href="#">Work 223</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 23</a>
<ul class="navigation-4">
<li>
<a href="#">Work 231</a>
</li>
<li>
<a href="#">Work 232</a>
</li>
<li>
<a href="#">Work 233</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Work 3</a>
<ul class="navigation-3">
<li>
<a href="#">Work 31</a>
<ul class="navigation-4">
<li>
<a href="#">Work 311</a>
</li>
<li>
<a href="#">Work 312</a>
</li>
<li>
<a href="#">Work 313</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 32</a>
<ul class="navigation-4">
<li>
<a href="#">Work 321</a>
</li>
<li>
<a href="#">Work 322</a>
</li>
<li>
<a href="#">Work 323</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 33</a>
<ul class="navigation-4">
<li>
<a href="#">Work 331</a>
</li>
<li>
<a href="#">Work 332</a>
</li>
<li>
<a href="#">Work 333</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</body>
</html>
근데..... 보통 3단 이상 넘어가면 잘못된 설계라고 하더군요......
아무리 많이 가도 3단 안에 끝내야 옳바른 설계라고 하더라구요.......
어떤 메뉴라고 하더라도 3단을 넘어가면 설계초보라고...
그래서 저도 왠만하면 2단에서 끝낼려고 합니다.......