CSS를 수정해 보려고 하는데 쉽지 않네요. 채택완료
alexseo
3년 전
조회 1,838
답변 2개
채택된 답변
+20 포인트
3년 전
반응형 미디어쿼리 부분은 제외하고 살짝 재구성해 봤습니다.
</p>
<p><style>
.navbar {
/* overflow: hidden; */
background-color: #333;
position: relative;
}</p>
<p>.navbar a {
float: left;
font-size: 14px;
color: white;
text-align: center;
padding: 1px 15px;
text-decoration: none;
}</p>
<p>.subnav {
float: left;
/* overflow: hidden; */
}</p>
<p>.subnav .subnavbtn {
font-size: 14px;
line-height: 20px;
border: none;
outline: none;
color: white;
padding: 5px 1px;
background-color: inherit;
font-family: inherit;
margin: 0;</p>
<p>}</p>
<p>.navbar a:hover, .subnav:hover .subnavbtn {
background-color: #ff8900;
}</p>
<p>.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: #ff8900;
width: 100%;
/* z-index: 1; */
top: 30px; /* .subnav .subnavbtn : line-height(20) + padding-top(5) + padding-bottom(5) = 30 */
}</p>
<p>
.subnav-content a {
float: left;
color: white;
text-decoration: none;
padding: 5px 20px;
}</p>
<p>.subnav-content a:hover {
background-color: #eee;
color: black;
}</p>
<p>.subnav:hover .subnav-content {
display: block;
}</p>
<p>.navbar::after {
content: "";
display: block;
clear: left;
}
.subnav-content::after {
content: "";
display: block;
clear: left;
}
</style></p>
<p>
<div class="navbar"></p>
<p> <div class="subnav">
<button class="subnavbtn"><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information">전국</a></button>
</div>
<div class="subnav">
<button class="subnavbtn"><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7&stx=서울">서울</a> </button>
</p>
<p> <div class="subnav-content">
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=강남구">강남구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=강동구">강동구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=강북구">강북구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=강서구">강서구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=관악구">관악구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=광진구">광진구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=구로구">구로구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=금천구">금천구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=노원구">노원구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=도봉구">도봉구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=동대문구">동대문구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=동작구">동작구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=마포구">마포구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=서대문구">서대문구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=서초구">서초구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=성동구">성동구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=성북구">성북구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=송파구">송파구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=양천구">양천구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=영등포구">영등포구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=용산구">용산구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=은평구">은평구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=종로구">종로구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=중구">중구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=중랑구">중랑구</a>
</p>
<p> </div></p>
<p>
</div>
</div></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인