그누5로 이제 넘어왔는데.. theme/basic/css/default.css 채택완료
windday
5년 전
조회 1,933
상단 메뉴가
이렇게 보입니다. 상단이 전체적으로 아래로 눌리는거 같습니다
그런데,
theme/basic/css/default.css 에
</p>
<p>*, :after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}</p>
<p>을 삭제하면 정상적으로 보이는데 관리자 페이지에 우측부분이 아래로 내려가 버리고 ..
메뉴 html 은
</p>
<p><script type="text/javascript"></p>
<p> $(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></p>
<p> </p>
<p>
</head></p>
<p><body></p>
<p> <div id="header">
<h1><a href="../../index.html"><img src="../../images/logo.png" /></a></h1>
<div class="nav_wrap"></p>
<p> <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></p>
<p> <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></p>
<p>
<li class="menu_bar"><a href="javascript:menu3();">
<p>온라인문의</p></a>
<ul class="menu1">
</ul>
</li></p>
<p>
<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></p>
<p> </div><!-- nav_wrap -->
</div><!-- header --></p>
<p>
css는
</p>
<p>#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;
}</p>
<p>#top_menu ul li a {
color:#000;
display:block;
padding:0 10px;</p>
<p> }
#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; }</p>
<p>/* @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;}</p>
<p>/* @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; }</p>
<p>#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; }</p>
<p>겹쳐지는것도 없는데.. 왜 이러는 걸까요?
그누4에서도 사용하던 메뉴 였는데..
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
5년 전
개발자도구에서 computed된 스타일들을 하나하나씩 분석해보면서 어떤 스타일시트와 충돌하는지 확인하다보면 저같은경우 어느정도 해결책을 찾을 수 있었습니다
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인