#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 안에서
/* 좌측2차메뉴 */ #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 { padding:0; width:200px; background:url(../images/blue/zm.gif) repeat-y; } #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 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;}#lnb_b { height:34px; background:url(../images/blue/zb.gif) no-repeat; }빨간색부분이 이미지해당 부분입니다.
가로폭부분은 픽셀이 정해져 있으며, 높이는 메뉴갯수에 따라서 확장됩니다.
p.s https://moonhouse.co.kr/zbxe/136732 이곳에 더 자세하게 설명되어져 있습니다.