<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> I </title>
<style>
#nav
{
list-style-type: none;
height: 45px;
padding: 6px 7px;
margin: 0;
background:#7d7d7d;
border-radius:1.5em;
}
#nav li {
float: left;
position: relative;
margin:5px 10px;
padding: 0;
}
#nav li a {
display: block;
font-family:"굴림";
font-weight:600;
font-size:1em;
padding:10px 20px;
color: #e7e5e5;
text-decoration: none;
margin:0;
border-radius:1.4em;
text-shadow:0 1px 1px rgba(0,0,0,.3);
}
#nav li:hover > a{
background:#ebebeb;
color:#444;
text-shadow: 0 1px 1px rgba(255,255,255,1);
border-radius:1.4em;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 1px rgba(0,0,0,0.2);
}
#nav ul
{
margin:0;
padding:0;
list-style:none;
position: absolute;
left: 0;
top:45px;
width: 150px;
background:#ddd;
border:1px solid #b4b4b4;
border-radius:8px;
box-shadow:0 1px 3px rgba(0,0,0,.3);
opacity: 0;
}
#nav ul li {
float: none;
margin:0;
padding:0;
height:0;
overflow:hidden;
}
#nav li:hover ul {
opacity: 1;
}
#nav li:hover ul li {
height:35px;
overflow:visible;
padding:0;
}
#nav ul a {
font-weight:normal;
text-shadow:0 1px 0 #fff;
color:#333;
}
#nav ul li:hover > a {
background:#0078ff;
color:#fff;
text-shadow:0 1px 1px rgba(0,0,0,0.1);
border-radius:0;
}
#nav ul li:first-child > a{
border-top-left-radius:8px;
border-top-right-radius:8px;
}
#nav ul li:last-child > a {
border-bottom-left-radius:8px;
border-bottom-right-radius:px;
}
</style>
</head>
<body>
<header>
<nav>
<ul id="nav">
<li><a href="#"title="a"><img src="#"></a></li>
<ul>
<li><a href="#"title="b 페이지로 이동합니다.">b</a></li>
<li><a href="#"title="c 페이지로 이동합니다.">c</a></li>
<li><a href="#"title="d로 이동합니다.">d</a></li>
<li><a href="#"title="e 페이지로 이동합니다.">e</a></li>
</ul>
<li><a href="#"title="A 페이지로 이동합니다.">A</a></li>
<ul>
<li><a href="#"title="a 페이지로 이동합니다.">a</a></li>
<li><a href="#"title="b 페이지로 이동합니다.">b</a></li>
</ul>
<li><a href="#"title="B 페이지로 이동합니다.">B</a></li>
<li><a href="#"title="C 페이지로 이동합니다.">C</a></li>
<ul>
<li><a href="#"title="c1 페이지로 이동합니다.">c1</a></li>
<li><a href="#"title="c2 페이지로 이동합니다.">c2</a></li>
<li><a href="#"title="c3 페이지로 이동합니다.">c3</a></li>
<li><a href="#"title="c4 페이지로 이동합니다.">c4</a></li>
<li><a href="#"title="c5 페이지로 이동합니다.">c5</a></li>
</ul>
</nav>
</header>
<section>
<article>
</article>
<article>
</article>
</section>
<footer>
</footer>
</body>
</html>
현제 제가 연습해보려고 만들고있는데 책이랑 동영상에선 잘돌아가는것이 제가 한번수정하기만하면 드롭다운이 실행이안됩니다. 도대체 문제가 뭐져? ㅠㅠ 좀알려주세용
