<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Home</title>
<link rel="stylesheet" href="../css/common.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 id="logo"> Home</h1>
<div id="gnb">
<ul>
<li><a href="index.html">소개</a></li>
<li><a href="code_diary.html">코드 다이어리</a>
<ul>
<li><a href="code_w3school.html">w3school 홈페이지</a></li>
<li><a href="code_calculator.html">계산기만들기</a></li>
<li><a href="code_naver.html">네이버폼</a></li>
<li><a href="code_midterm.html">중간고사 과제 sk와이번스 홈페이지</a></li>
<li>무한롤링</li>
</ul>
</li>
<li><a href="library.html">라이브러리</a></li>
<li><a href="daily.html">일상</a></li>
</ul>
</div>
</div>
<div id="contents">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
table{border-collapse: collapse;}
*{ padding: 0; margin: 0;}
ul, li{list-style-type: none;margin: 0px; padding: 0px; position: relative;}
a{text-decoration: none; color: black;}
#wrapper{max-width: 1200px; margin: auto;}
#header{overflow: hidden;}
#logo { float: left; margin: 20px 0 0 20px;}
#gnb {float: right; margin: 20px 20px;}
#gnb ul li {float: left; padding: 10px 20px;}
#gnb ul li ul{float: left; padding: 10px 20px;display: none;}
#gnb ul li ul:hover{display: block;}
위에는 html이고, 밑에는 css입니다. 지금 드롭다운 메뉴를 만들고 있습니다. id=gnb부분에 대해서 드롭다운 메뉴로 설정하려고 하는데 혹시 도움주실 분이 계실까요?
댓글 0