묻고답하기

http://www.zeroboard.com/?mid=zbxe_user_tip&document_srl=4779574

럭키 님의 이↑↑↑ 글을 읽고 5차메뉴까지 표시할 수 있도록 소스를 수정해 볼라구 합니다.
내가 생각하고 있는 것은

===========================================================
<!-- ▼main_menu 5차 시작 -->
                    <!--@if($v4['list'])-->
     <ul>
                        <!--@foreach($v4['list'] as $k => $v5)--><!--@if($v5['text'])-->
      <li <!--@if($v5['selected'])-->class="on5"<!--@end-->>
      <a href="{$v5['href']}" <!--@if($v5['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$v5['text']}</a>
<!-- ★ -->

<!-- ★ -->
       </li>
                        <!--@end--><!--@end-->
     </ul>
                    <!--@end-->
<!-- ▲main_menu 5차 끝 -->
===========================================================

이 부분처럼 계속 삽입해서 4차 5차를 만들었습니다.

그니깐 6차를 만들려면
<!-- ★ -->

<!-- ★ -->
이 두 사이에 같은 코드
<!-- ▼
<!-- ▲
를 또 집어 넣어서 6차메뉴를 만드는 것이죠.

그렇게 4차와 5차를 엮어 봤습니다.

전체 코드는 이렇습니다.
==========================================================

<!-- ▽main_menu 2차 시작 -->

            <!--@if($menu_1st)-->
   <ol id="lnb">
                {@ $idx = 1 }
                <!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['text'])-->
    <li <!--@if($val['selected'])-->class="on"<!--@end-->>
    <a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a>

<!-- ▼main_menu 3차 시작 -->
                    <!--@if($val['list'])-->
     <ul>
                        <!--@foreach($val['list'] as $k => $v)--><!--@if($v['text'])-->
      <li <!--@if($v['selected'])-->class="on"<!--@end-->>
      <a href="{$v['href']}" <!--@if($v['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$v['text']}</a>
<!-- ★ -->

<!-- ▼main_menu 4차 시작 -->
                    <!--@if($v['list'])-->
     <ul>
                        <!--@foreach($v['list'] as $k => $v4)--><!--@if($v4['text'])-->
      <li <!--@if($v4['selected'])-->class="on4"<!--@end-->>
      <a href="{$v4['href']}" <!--@if($v4['+ 'open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$v4['text']}</a>
<!-- ★ -->

<!-- ▼main_menu 5차 시작 -->
                    <!--@if($v4['list'])-->
     <ul>
                        <!--@foreach($v4['list'] as $k => $v5)--><!--@if($v5['text'])-->
      <li <!--@if($v5['selected'])-->class="on5"<!--@end-->>
      <a href="{$v5['href']}" <!--@if($v5['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$v5['text'+ ']}</a>
<!-- ★ -->

<!-- ★ -->
       </li>
                        <!--@end--><!--@end-->
     </ul>
                    <!--@end-->
<!-- ▲main_menu 5차 끝 -->

<!-- ★ -->
       </li>
                        <!--@end--><!--@end-->
     </ul>
                    <!--@end-->
<!-- ▲main_menu 4차 끝 -->

<!-- ★ -->
       </li>
                        <!--@end--><!--@end-->
     </ul>
                    <!--@end-->
<!-- ▲main_menu 3차 끝 -->
                   
    </li>
                {@$idx++}
                <!--@end--><!--@end-->
   </ol>
            <!--@end-->
<!-- △main_menu 2차 끝 -->


  </div>
==========================================================

이것이 될지는 모르겠지만 좌측 메뉴에 4차메뉴를 표시할 수 있는 방법인 듯 해서요.
이것을 해 보지는 않았는데 그것은 바로 css파일 때문입니다.

*****************질문의 요지******************

css파일의 내용입니다.

#lnb { border-top:1px solid #dddddd; padding:4px 5px; width:190px;}
#lnb li { list-style:none; padding-bottom:4px;}
#lnb li a { padding:6px 5px 6px 13px; width:170px; display:block; border:1px solid #e8e8e8; background:url(../images/white/bgLnbOff.gif) repeat-x; color:#3e3e3e; position:relative; z-index:99; text-decoration:none;}
#lnb li a:hover,
#lnb li a:focus { color:#ffffff; background:#de4332; border:1px solid #de4332;}
#lnb li.on a { color:#ffffff; background:#de4332; border:1px solid #de4332;}
#lnb li.on a:hover,
#lnb li.on a:focus { font-weight:bold;}
#lnb li ul { display:none; position:relative; width:184px; padding:0 3px; position:relative; border-top:1px solid #ffffff; overflow:hidden;}
#lnb li.on ul { display:block;}
#lnb li ul li { padding:0; border-top:1px solid #f2f2f2; position:relative; top:-1px;}
#lnb li ul li a { padding:6px 5px 6px 10px; width:169px; color:#818181 !important; border:none; background:none !important; border:none !important;}
#lnb li ul li a:hover,
#lnb li ul li a:focus { font-weight:normal !important; color:#de4332 !important;}
#lnb li.on ul li.on a { color:#ff1a00 !important; font-weight:bold !important; background:url(../images/white/bulletLnb.gif) no-repeat 175px center  !important;}

하이어라키를 보면
lnb가 있고요. 그 아래
li 아래에 a.on 그리고 삽입된 하위 ul 이 있습니다.

규칙을 정리해 보면,

[lnb] -- li - a, (.on), ul 이렇게 되고요. 각각 a , on a 등에 3가지씩 스타일 잡아 줬네요.

css내용을 3줄씩 줄여보면

[lnb]

[lnb] -- li
[lnb] -- li - a   3개
[lnb] -- li - .on a  3개

[lnb] -- li -ul
[lnb] -- li.on -  ul

[lnb] -- li - ul - li
[lnb] -- li - ul - li - a  3개
[lnb] -- li.on - ul - li.on - a 

3개는 { }랑 hover focus라고 하고요.

어쨌든 그러면 이거를 메뉴4 메뉴5를 위해서 li와 ul이 꼬리를 물 것이고 거기에 on4와 on5가 붙을 것이거든요?

도대체 이걸 어트케 해야 되요??
아~~ css 고치려다 머리 터집니다.
도와 쥬세요!


======================
위 문장을 올려보니 하위메뉴가 나오긴 하는데 다 펼쳐져서 나오네요 대략 실패네요.
뭐가 잘못된 것일까요