#lnb li ul { position:relative; display:block; overflow:hidden; width:200px; } #lnb li.on ul { display:block;} #lnb li ul li { position:relative; padding-left:10px; top:-1px; } #lnb li ul li a { color:#c0c0c0 !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:#ff6600 !important;} #lnb li.on ul li.on a { color:#808080 !important; font-weight:bold !important; !important;}
구드한스님 반갑습니다.
질문하신 2차 메뉴의 경우 "문하우스 레이아웃"에 적용되어져 있습니다.
https://moonhouse.co.kr/zbxe/266116
./layouts/moonhouse/layout.html 안에서 아래부분이고요
<!--@if($layout_info->Lm == 'Y')-->
<!-- sub_menu 2차 시작 -->
<!--@if($menu_1st)-->
<div id="lnb_t">
<h1>{$menu_1st['link']}</h1>
</div>
<ol id="lnb">
{@ $idx = 1 }
<!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['link'])-->
<li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>
<img src="/images/{$layout_info->colorset}/bullet14.gif" align="absmiddle"> {$val['link']}</a>
<!-- main_menu 3차 시작 -->
<!--@if($val['list'] && ($val['expand']=='Y'||$val['selected']) )-->
<ul>
<!--@foreach($val['list'] as $k => $v)--><!--@if($v['link'])-->
<li <!--@if($v['selected'])-->class="on"<!--@end-->><a href="{$v['href']}" <!--@if($v['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>
<img src="/images/submenu_bul1.png" align="absmiddle"> {$v['link']}</a>
<!-- main_menu 4차 시작 -->
<!--@if($v['list'] && ($v['expand']=='Y'||$v['selected']) )-->
<ul>
<!--@foreach($v['list'] as $k => $v4)--><!--@if($v4['link'])-->
<li <!--@if($v4['selected'])-->class="on"<!--@end-->><a href="{$v4['href']}" <!--@if($v4['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>
<img src="/images/submenu_bul1.png" align="absmiddle"> {$v4['link']}</a></li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
</li>
<!--@end--><!--@end-->
</ul>
<!--@end-->
</li>
{@$idx++}
<!--@end--><!--@end-->
</ol>
<div id="lnb_b">
</div>
<!--@end-->
<!--@end-->
./layouts/moonhouse/css/(해당칼라).css 안에서
#lnb_t { margin-top:0px; padding:25px 5px 0px 5px; width:190px; height:55px; background:url(../images/blue/zt.gif) no-repeat; }
#lnb_t h1 { font-size:20px; color:#fff; padding-left:20px; }
#lnb li { padding-bottom:0px; list-style:none; }
#lnb li a:hover,
#lnb li a:focus { padding:10px 0px 0px 25px; width:175px; height:16px; display:block; background:url(../images/blue/bgLnbOn.gif) no-repeat center; color:#f60; position:relative; text-decoration:none; z-index:97; }
#lnb li a { padding:10px 0px 0px 23px; width:177px; height:16px; display:block; background:url(../images/blue/bgLnbOff.gif) no-repeat center; color:#1E87AE; position:relative; text-decoration:none; z-index:96; }
#lnb li.on a { padding:10px 0px 0px 25px; width:175px; height:16px; display:block; color:#f60; font-weight:bold; background:url(../images/blue/bgLnbVr.gif) no-repeat center; position:relative; text-decoration:none; z-index:95; }
#lnb li.on ul { display:block;}
#lnb li ul li { position:relative; padding-left:10px; top:-1px; }
#lnb li ul li a { color:#c0c0c0 !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:#ff6600 !important;}
#lnb li.on ul li.on a { color:#808080 !important; font-weight:bold !important; !important;}
빨간색부분이 이미지해당 부분입니다.
가로폭부분은 픽셀이 정해져 있으며, 높이는 메뉴갯수에 따라서 확장됩니다.
p.s https://moonhouse.co.kr/zbxe/136732 이곳에 더 자세하게 설명되어져 있습니다.