풀다운 메뉴 반응형으로 만들기
본문
안녕하세요. 풀다운 메뉴바를 구상했는데 해당 메뉴를 반응형으로 만들고 싶습니다. width를 100%로 감싸도 되지 않는데 어떤 부분이 문제인지 여쭙고 싶습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ page language="java" contentType="text/html; charset=euc-kr" %>
<%@ include file="../include/jstl.jsp"%>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800');
body{
width:100%;
}
.top{
text-align: center;
margin: auto;
width:100%;
}
.top_td {
width:500px;
color:gray;
}
.top_td span {
cursor:pointer;
font-size: 11px;
}
.top_btn>li{display:inline-block;}
/*img {display: block; margin: 0px auto;}*/
* {margin: 0; padding: 0; }
li {list-style: none; }
body {
font-family: 'Nanum Gothic';
width: 1663px;
margin: 0 auto;
}
.topMenu {
position:relative;
width: 100%;
text-align: center;
height: 40px;
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
}
.topMenu:after {
position:absolute;
content: "";
display: block;
clear: both;
}
.menu01>li {
display:inline-block;
z-index:99;
width: 11.22%;
line-height: 40px;
font-size: 14.5px;
cursor:pointer;
background-color:white;
margin-left:-6px;
}
.menu01 span {
font-size: 15px;
font-weight: 800;
text-align: center;
color: black;
cursor:pointer;
}
.menu01 span:hover {
color: #bb0000;
padding: 0px 0px 8px 0px;
border-bottom: 5px solid #bb0000;
}
.dept01 li {
color: black;
}
.dept01 li:hover {
color: #bb0000;
}
.dept01 {
display: none;
padding: 20px 0;
border-bottom: 1px solid #ccc;
background-color:white;
opacity: 0.95;
}
#nop {
float: none;
}
.none:after {
content: "";
display: block;
clear: both;
z-index:98;
}
.hidden{
visibility:hidden;
}
</style>
</head>
<script type="text/javascript" src="/js/action_main.js"></script>
<script type="text/javascript" src="/js/action.js"></script>
<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
$(document).on('mouseenter', '.topMenu span', function() {
$('.dept01').slideDown(300);
});
$(document).on('mouseleave', '.menu01', function () {
if(!$(this).hasClass('topMenu')) {
$('.dept01').slideUp(300);
}
});
</script>
<!-- top -->
<body>
<div class="top_logo">
<table class="top">
<tr>
<td class="top_td"></td>
<td class="top_td"><a href="/index_ngk.jsp"><img id="logoImg" src="images/logo.png" border="0" alt="logo"></a></td>
<td class="top_td" align="left">
<span style="padding:1px 25px 0px 100px;">JOIN</span>
<span style="padding:1px 25px 0px 0px;">LOGIN</span>
<span style="padding:1px 25px 0px 0px;">MY PAGE</span>
<span style="padding:1px 25px 0px 0px;">Q&A<span>
</td>
</tr>
</table>
</div>
<div class="topMenu">
<ul class="menu01">
<li><span></span>
<ul class="dept01">
<li id="nop" class="hidden">sub01</li>
<li id="nop" class="hidden">sub02</li>
<li id="nop" class="hidden">sub03</li>
<li id="nop" class="hidden">sub04</li>
<li id="nop" class="hidden">sub05</li>
</ul>
</li>
