그누5로 이제 넘어왔는데.. theme/basic/css/default.css
본문
상단 메뉴가
이렇게 보입니다. 상단이 전체적으로 아래로 눌리는거 같습니다
그런데,
theme/basic/css/default.css 에
*, :after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
을 삭제하면 정상적으로 보이는데 관리자 페이지에 우측부분이 아래로 내려가 버리고 ..
메뉴 html 은
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$('#main_visual').jBanner({ width: '100%', height: 420 });
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#nav li').hover(function() {
$('ul', this).slideDown(200);
$(this).children('a:first').addClass("hov");
}, function() {
$('ul', this).slideUp(100);
$(this).children('a:first').removeClass("hov");
});
}); // sub_menu slide
</script>
</head>
<body>
<div id="header">
<h1><a href="../../index.html"><img src="../../images/logo.png" /></a></h1>
<div class="nav_wrap">
<ul id="nav">
<li class="menu_bar"><a href="javascript:menu1();"><p>회사소개</p></a>
<ul class="menu1">
<li class="mbd"><a href="javascript:menu1sub1();">인사말</a></li>
<li><a href="javascript:menu1sub2();">오시는길</a></li>
</ul>
</li>
<li class="menu_bar"><a href="javascript:menu2();"><p>제품소개</p></a>
<ul class="menu1">
<li class="mbd"><a href="javascript:menu2sub1();">볼트 </a></li>
<li><a href="javascript:menu2sub2();">너트</a></li>
<li><a href="javascript:menu2sub3();">타정공구/가스공구</a></li>
<li><a href="javascript:menu2sub4();">타정총용 공포/핀</a></li>
</ul>
</li>
<li class="menu_bar"><a href="javascript:menu3();">
<p>온라인문의</p></a>
<ul class="menu1">
</ul>
</li>
<li class="menu_bar"><a href="javascript:menu4();"><p>고객센터 </p></a>
<ul class="menu1">
<li class="mbd"><a href="javascript:menu4sub1();">공지사항</a></li>
<li><a href="javascript:menu4sub2();">자료실</a></li>
</ul>
</li>
</ul>
</div><!-- nav_wrap -->
</div><!-- header -->
css는
#header_wrap { width:100%; height:140px; margin:0 auto; border-bottom:1px solid #2291f2;}
#top_wrap {
width:100%;
height:40px;
border-top:3px solid #2291f2;
min-width:1220px;
}
#top_menu {
width:1200px;
margin:0 auto;
}
#top_menu ul {
float:right;
width:162px;
}
#top_menu ul li {
float:left;
font-size:13px;
height:40px;
line-height:40px;
font-weight:600;
}
#top_menu ul li.first{
background:url(../images/menu_bar.gif) right center no-repeat;
}
#top_menu ul li a {
color:#000;
display:block;
padding:0 10px;
}
#top_menu ul li.last a {
background:#448926;
color:#fff;
}
#header { width:1200px; height:87px; margin:0 auto;}
#header h1 {
float:left;
padding-top:25px;
}
.nav_wrap { width: 850px; float:right; }
/* @group core nav menu */
#nav { margin: 0; padding: 0; list-style: none; height: 87px; }
#nav li p{height:62px; line-height:30px; margin-top:35px; font-size:20px; font-family:'Nanum Gothic' !important;}
#nav li p span{font-size:13px;}
#nav li { float: left; display: block; position: relative; z-index: 999;}
#nav li a { display: block; padding: 0; line-height: 57px; text-decoration: none; zoom: 1; width:200px; text-align:center; color:#242424; font-family:'Nanum Gothic' !important;}
#nav li a:hover, #nav li a.hov { color:#6e6e6e; }
.menu_p{ height:72px; line-height:30px; margin-top:25px;}
.menu_p span { font-size:13px;}
/* @group subnav */
#nav ul { position: absolute; left:0px; display: none; margin: 0; padding: 0; list-style: none; top:80px }
#nav ul.menu1 li { width:170px; float: left; }
#nav ul li:hover { background:#045cb5; }
#nav ul.menu1 a { width:168px; display: block; height: 20px; line-height:20px; padding: 10px 0 ; font-size:13px; color:#6e6e6e; border-bottom:1px #dddddd solid;border-left:1px #dddddd solid;border-right:1px #dddddd solid; background:#fff;}
.mbd a{ border-top:1px #dddddd solid;}
#nav ul.menu1 a:hover { font-weight:600; text-decoration:none; color:#000; padding: 10px 0; }
겹쳐지는것도 없는데.. 왜 이러는 걸까요?
그누4에서도 사용하던 메뉴 였는데..
답변 2
개발자도구에서 computed된 스타일들을 하나하나씩 분석해보면서 어떤 스타일시트와 충돌하는지 확인하다보면 저같은경우 어느정도 해결책을 찾을 수 있었습니다
그누4에서 사용하던 메뉴를 그누보드5에 적용하기 위해서는 서로 간섭하는 css와 jquery버전 등도 고려해야 합니다.
기존의 css와 그누보드5에서 제공하는 css가 서로 충돌한다면 개발자도구를 열고 어느 부분에 문제가 있는지 검토가 필요합니다.
답변을 작성하시기 전에 로그인 해주세요.
