드롭 다운메뉴 글 부분 정렬문제로 문의드립니다. 정보
드롭 다운메뉴 글 부분 정렬문제로 문의드립니다.본문
이런식으로 드로다운 메뉴를 가운데 정렬까지 하는것은 좋았으나
드롭다운 되면 하위메뉴에서 저런식으로 밀림현상이있습니다. 어떻게 해결해야하는가요?
관스틴님의 스킨을 적용했습니다.
문제가 된다면 코드는 삭제하겠습니다.
------코드입니다.--------
<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:500);
/*
#########################################################
## 관스틴 MARINE 스타일 드롭 다운 메뉴 # 2 ##
##사이트 제작시, 메뉴 부분에서 고생하시는 분들은 위해... ##
##앞으로도 더 좋은 스킨 개발하여, 배포하도록 노력하겠습니다.. ##
## date: 2013.04.03 Database: gnuboard4 ##
#########################################################
*/
/* Menu CSS */
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a{
padding: 0;
margin: 0;
line-height: 1;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 500;
font-size: 13px;
color: #444444;
-webkit-transition: all ease .3s;
-o-transition: all ease .3s;
-moz-transition: all ease .3s;
-ms-transition: all ease .3s;
transition: all ease .3s;
}
#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {
content: '';
display: table;
}
#cssmenu:after, #cssmenu > ul:after {
clear: both;
}
#cssmenu a{
text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}
#cssmenu ul{
background: #FFF;
border-radius: 3px;
border-top:1px solid #c1c4cf ; border-bottom:3px solid #3a4461;
-webkit-box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15);
-o-box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15);
-moz-box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15);
-ms-box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15);
box-shadow: 0 1px 2px rgba(2, 2, 2, .25), inset 0 1px 1px rgba(255, 255, 255, .15);
}
#cssmenu ul > li{
float: left;
left: 25%;
list-style: none;
position: relative;
}
#cssmenu ul > li > a{
display: block;
text-decoration: none;
padding: 20px 34px;
position: relative;
}
#cssmenu ul > li > a:hover{
background: #f7f7f7;
/*-webkit-box-shadow: inset 0 0 1px #1f325d;
-o-box-shadow: inset 0 0 1px #1f325d;
-moz-box-shadow: inset 0 0 1px #1f325d;
-ms-box-shadow: inset 0 0 1px #1f325d;
box-shadow: inset 0 0 1px #1f325d;
-webkit-transition: all ease .3s;
-o-transition: all ease .3s;
-moz-transition: all ease .3s;
-ms-transition: all ease .3s;
transition: all ease .3s;*/
}
#cssmenu ul > li > a:hover:before{
content: '';
z-index: 2;
position: absolute;
border: 1px solid white;
border-top: 0;
border-bottom: 0;
border-right: 0;
width: 100%;
height: 100%;
top: 0;
left: -1px;
opacity: .2;
}
#cssmenu ul > li > a:hover:after{
content: '';
z-index: 2;
position: absolute;
border: 1px solid white;
border-top: 0;
border-bottom: 0;
border-left: 0;
width: 100%;
height: 100%;
top: 0;
right: -1px;
opacity: .2;
}
#cssmenu > ul > li > ul{
opacity: 0;
visibility: hidden;
position: absolute;
}
#cssmenu > ul > li:hover > ul{
opacity: 1;
visibility: visible;
position: absolute;
border-radius: 0 0 3px 3px;
-webkit-box-shadow: none;
-o-box-shadow: none;
-moz-box-shadow:none;
-ms-box-shadow: none;
box-shadow: none;
}
#cssmenu > ul > li > ul{
width: 150px;
position: absolute;
}
#cssmenu > ul > li > ul > li{
float: none;
position: relative;
}
#cssmenu > ul > li > ul > li > ul{
opacity: 0;
visibility: hidden;
position: absolute;
}
#cssmenu > ul > li > ul > li:hover > ul{
opacity: 1;
visibility: visible;
position: absolute;
}
#cssmenu > ul > li > ul > li > ul{
left: 202px;
top: 1px;
width: 200px;
}
#cssmenu > ul > li > ul > li > ul > li{
float: none;
}</style>
<div id='cssmenu'>
<ul>
<li><a href='<?=$g4[path]?>'><span>HOME</span></a></li>
<?
$excgr = "('community','test', 'adver','Card','mobile', 'social', 'wiki')"; // 보이지 않도록 제외시킬 그룹명
$sql = " SELECT a.gr_id, a.gr_subject, a.gr_use_access, a.gr_9, a.gr_10, b.mb_id FROM $g4[group_table] AS a LEFT JOIN $g4[group_member_table] AS b ON a.gr_id = b.gr_id WHERE (b.mb_id = '$member[mb_id]' AND a.gr_use_access = '1' ) OR a.gr_use_access = '0' and a.gr_id not in " . $excgr . " ORDER BY a.gr_1";
$result = sql_query($sql);
echo "<li>\n";
for ($i=0; $row=sql_fetch_array($result); $i++) {
$gSubject = ($row['gr_id'] == $gr_id)?$row['gr_subject']:$row['gr_subject'];//그룹제목
$glink = (!empty($row['gr_10']))?$row['gr_10']:$g4[path].'/bbs/'.'group.php?gr_id=' .$row['gr_id'];//그룹링크
if ($row['gr_id'] == $gr_id) {
echo "<li class='has-sub'><a href='$glink'>$gSubject</a>\n";
echo "<ul>\r\n";
} else {
echo "<li class='has-sub'><a href='$glink'>$gSubject</a>\n";
echo "<ul>\r\n";
}
$sqlb = " select bo_subject, bo_table, bo_category_list, bo_9, bo_10 from $g4[board_table] where (bo_list_level <= $member[mb_level]) and (gr_id = '$row[gr_id]') order by bo_order_search";
$resultb = sql_query($sqlb);
for ($j=0; $rowb=sql_fetch_array($resultb); $j++) {
$tmp_write_table = $g4[write_prefix] . $rowb[bo_table];
$tmp_write_table_category = $g4[write_prefix] . $rowb[bo_table] . $rowb[bo_category_list];
///////////게시판호출/////////////////////
$bSubject = ($rowb['bo_table'] == $bo_table)?cut_str(get_text($rowb['bo_subject']),100,""):cut_str(get_text($rowb['bo_subject']), 100,"");//게시판제목
$bLink = (!empty($rowb['bo_10']))?$rowb['bo_10']:$g4[path].'/bbs/'.'board.php?bo_table=' .$rowb['bo_table'];//게시판링크
echo "\t<li><a href='$bLink'><span>$bSubject</span></a></li>\n";
echo "\n";
}
echo "\t</ul>\n";
echo "</li>\n";
}
?>
<div id='cssmenu'>
<ul>
<li><a href='http://765.p.ht/wiki/'><span>WIKI</span></a></li>
</ul>
</div>
댓글 전체