제로나라 님의 메뉴스킨에서
본문
아래 제로나라 님의 메뉴를 사용하고자 하는데요.
http://sir.co.kr/bbs/board.php?bo_table=g5_skin&wr_id=6687
메뉴에서 재일 마지막 부분 마우스 오버시, 서브부분이 밖으로 나가는데, 이걸 왼쪽으로 나타나게 할수 없을까요?
아래 이미지처럼요.
아래는 스타일 소스입니다.
<div id="wrapper">
<nav id="cssmenu">
<ul>
<?php
$sql = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '2'
order by me_order, me_id ";
$result = sql_query($sql, false);
$gnb_zindex = 999; // gnb_1dli z-index 값 설정용
for ($i=0; $row=sql_fetch_array($result); $i++) {
?>
<li class="has-sub" style="z-index:<?php echo $gnb_zindex--; ?>">
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>"><span><?php echo $row['me_name'] ?></span></a>
<?php
$sql2 = " select *
from {$g5['menu_table']}
where me_use = '1'
and length(me_code) = '4'
and substring(me_code, 1, 2) = '{$row['me_code']}'
order by me_order, me_id ";
$result2 = sql_query($sql2);
for ($k=0; $row2=sql_fetch_array($result2); $k++) {
if($k == 0)
echo '<ul>'.PHP_EOL;
?>
<li><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>"><span><?php echo $row2['me_name'] ?></span></a></li>
<?php
}
if($k > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
}
if ($i == 0) { ?>
<li>메뉴 준비 중입니다.<?php if ($is_admin) { ?> <br><a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 > 환경설정 > 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>
<?php } ?>
</ul>
</nav>
</div>
스타일 소스
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
background: #3366cc;
border-bottom: 2px solid #db000b;
width: auto;
margin-bottom:10px;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #3366cc;
color: #ffffff;
display: block;
font-family:'MS PGothic', Osaka, Tahoma, '굴림', Gulim, SimSun, Arial, sans-serif;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul > li {
display: inline-block;
float: left;
margin: 0;
width:97px;
height:42px;
line-height:42px;
text-align:center;
}
#cssmenu.align-center {
text-align: center;
}
#cssmenu.align-center > ul > li {
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul {
float: right;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu > ul > li > a {
color: #fff;
font-size: 15px;
font-weight:bold;
}
#cssmenu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #db000b;
margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
}
#cssmenu.align-right > ul > li:first-child > a,
#cssmenu.align-center > ul > li:first-child > a {
}
#cssmenu.align-right > ul > li:last-child > a {
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a {
color: #fff;
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 180px;
top: 100%;
left: 0;
}
#cssmenu.align-right .has-sub ul {
left: auto;
right: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #db000b;
border-bottom: 1px dotted #ff0f1b;
font-size: 12px;
filter: none;
display: block;
line-height: 120%;
padding: 10px;
color: #ffffff;
text-align:left;
}
#cssmenu .has-sub ul li:hover a {
background: #a80008;
}
#cssmenu ul ul li:hover > a {
color: #ffffff;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu.align-right .has-sub .has-sub ul,
#cssmenu.align-right ul ul ul {
left: auto;
right: 100%;
}
#cssmenu .has-sub .has-sub ul li a {
background: #a80008;
border-bottom: 1px dotted #ff0f1b;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #8f0007;
}
#cssmenu ul ul li.last > a,
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul ul li.last > a,
#cssmenu ul ul ul li:last-child > a,
#cssmenu .has-sub ul li:last-child > a,
#cssmenu .has-sub ul li.last > a {
border-bottom: 0;
}
답변 3
이렇게만 바서는 파악이 힘들거같구여
만드시는 사이트를 바야알거같네요.
그러니간 제일 오른쪽 메뉴는 아래처럼 마우스 오버시 나타나게 할려는 겁니다.
무슨 말인지는 알겠으나 해당 css를 봐야 내용을 알수있는거죠