왜 전 드롭다운메뉴가 안만들어질까요?

<!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>

현제 제가 연습해보려고 만들고있는데 책이랑 동영상에선 잘돌아가는것이 제가 한번수정하기만하면 드롭다운이 실행이안됩니다. 도대체 문제가 뭐져? ㅠㅠ 좀알려주세용