묻고답하기
드롭메뉴가 안되서 고민입니다..
2015.03.15 19:47
홈페이지 새로 만들어서 기존에 사용하던 레이아웃 가져와서 복붙했는데 적용이 안되네요...... 레이아웃에 사용한 코드입니다.. ㅠㅠ
도와주시면 감사합니다... 사이트는 care.knu.ac.kr입니다
CSS
---------------------------------------------------------------------------------------
html, body {
background: url(/images/header-bg-care.jpg) repeat-x;
margin: 0; padding: 0;
height: 100%;
width: 1000px;
}
#wrap {
margin: 0;
padding: 0;
height: 150px;
position: relative;
}
#main-nav {
margin: 0px 0px 0px 2px;
text-align: left;
min-height: 25px;
padding-top: 11px;
padding-left: 0px;
}
#main-handle {
position: absolute; left: 520px; top: 90px;
width: 600px;
float: right;
margin-top: -1px;
}
#main-nav li {
display: inline;
list-style: none;
}
#main-nav li a {
margin-right: 5px;
font-size: 15px;
text-decoration: none;
color: #ffffff;
font-family: Gothic;
text-transform: uppercase;
font-weight: bold;
padding: 2px;
outline: 0;
position: relative;
top: -2px;
}
#main-nav li a:hover, #main-nav li a.active {
background: #0D3F83;
}
.sub-links {
display: none;
position: absolute;
width: 400px;
top: 30px; left: -60px;
padding: 4px;
text-align: left;
background: #0D3F83;
/*--Bottom right rounded corner--*/
-moz-border-radius-bottomright: 15px;
-khtml-border-radius-bottomright: 15px;
-webkit-border-bottom-right-radius: 15px;
/*--Bottom left rounded corner--*/
-moz-border-radius-bottomleft: 15px;
-khtml-border-radius-bottomleft: 15px;
-webkit-border-bottom-left-radius: 15px;
/*--Top right rounded corner--*/
-moz-border-radius-topright: 15px;
-khtml-border-radius-topright: 15px;
-webkit-border-top-right-radius: 15px;
/*--Top left rounded corner--*/
-moz-border-radius-topleft: 15px;
-khtml-border-radius-topleft: 15px;
-webkit-border-top-left-radius: 15px;
}
#main-nav li .sub-links li a {
font-size: 14px; color: #ffffff; text-transform: none;
margin: 10px;
padding: 0px;
}
#main-nav li .sub-links li a:hover{
}
#main-nav li a.close{
display: none;
position: absolute;
}
#main-nav li a.close:hover{
background: #900;
}
-------------------------------------
HTML
<!-- index -->
<script type="text/javascript" src="/jquery-1.6.1.min.js"></script>
<body>
<div id="wrap">
<table CELLPADDING="0" CELLSPACING="0" width="1000" border="0">
<tr>
<td width="521" rowspan="2"><a href="http://care.knu.ac.kr/xe" title=""><img src="/images/header.jpg" alt="Angry face" /></a></td>
<td width="400"><img class="zbxe_widget_output" widget="jdh_login_info" skin="jdh_style1" colorset="default" /></td>
</tr>
<tr>
<td height="120"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div id="main-handle">
<ul id="main-nav">
<li><a class="main-link" href="/?mid=introduction">연구소 소개</a>
<ul class="sub-links">
<li>
<a href="/?mid=introduction" title="">인사말</a>
</li>
<li>
<a href="/?mid=history" title="">연혁</a>
</li>
<li>
<a href="/?mid=organization" title="">조직도</a>
</li>
<li>
<a href="/?mid=people" title="">구성원</a>
</li>
<li>
<!---<a href="/?mid=map" title="">찾아오시는 길</a>
</li>-->
</ul>
</li>
<li><a class="main-link" href="/?mid=notice">공지사항</a>
<ul class="sub-links">
<li>
<a href="/?mid=notice" title="">공지사항</a>
</li>
<li>
<a href="/?mid=file" title="">서식/규정</a>
</li>
</ul>
</li>
<li><a class="main-link" href="/?mid=seminar">세미나/콜로퀴움/학술대회</a>
</li>
<li><a class="main-link" href="/?mid=board">게시판</a>
</li>
</ul>
</div>
<!-- End main-handle-->
</td>
</tr>
</table>
</div>
<!-- End wrap -->
<div align=right>
<table width="1200" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="vertical-align: top; width: 95px;"> </td>
<td style="vertical-align: top; width: 1120;" align="left">
<table style="text-align: left; width: 980px;" border="0" cellpadding="2"
cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; width: 60px;"><br />
</td>
<td style="vertical-align: top; width: 920px;">
<!-- 컨텐츠 시작 -->
{$content}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!-- foot -->
<div align=right>
<img src="/images/foot.jpg" height="30" width="970px">
<table border="0" cellpadding="0" cellspacing="0" width="900px">
<tr>
<td align="left"><p><a href="http://www.knu.ac.kr/bbs/newhome/sublayout.jsp?number=1001" target="_blank"><img src="/images/security.jpg"></a></p></td>
<td align="right"><a href="http://care.knu.ac.kr/xe" target="_blank" /><img src="/images/f_right.jpg"></a></td>
</tr>
</table>
</div>
------------------------------------------------
뭐가 문제있는지를 모르겠어요...
댓글 4
-
닉이
2015.03.15 19:57
-
Funnel
2015.03.15 20:10
저... 어디에 빠져있는거죠?....
-
닉이
2015.03.15 20:12
기존에 사용하셨던 레이아웃의 .js 파일에서 드롭다운 관련 스크립트도 추가되야 작동이 됩니다. #main-nav li a:hover가되면 sublink가 display:block으로 바뀌는 스크립트겠지요?
-
Funnel
2015.03.15 20:23
하... 한번 찾아봐겠네요... 예전에 만들어놓은 사람꺼 받아서 쓸려니 어렵네요ㅠㅠ
감사합니다
스크립트가 빠져있네요. 기존의 사용하던 레이아웃에서 스크립트도 복붙하셔야될듯합니다.