html - Created Dropdown menu with CSS in Dreamweaver, submenu items not linking -

i used video https://www.youtube.com/watch?v=qpo9hjjuktk create css dropdown menu submenus.

i got right , have tried linking list items in submenus other .html files , actual websites, nothing works. when click on submenu item go whatever page, nothing loads , stays on current page submenu open.

html:

'<nav class="nav-main">  <div class="logo">kudler fine foods</div>  <ul>   <li> <a href="#" class="nav-item">departments</a>      <div class="nav-content">      <div class="nav-sub">      <ul>         <li><a href="bakery.html">bakery</a></li>          <li><a href="#">meat & seafood</a></li>          <li><a href="#">produce</a></li>         <li><a href="#">cheese & dairy</a></li>         <li><a href="#">wine</a></li>      </ul>      </div>      </div>   </li>  </ul>  <ul>   <li> <a href="#" class="nav-item">information</a>   <div class="nav-content">   <div class="nav-sub">  <ul>  <li><a href="#">news</a></li>  <li><a href="#">about</a></li>  <li><a href="#">locations</a></li>  </ul>  </div>   </div>  </li>  </ul>  <ul>   <li> <a href="#" class="nav-item">other</a>   <div class="nav-content">   <div class="nav-sub">  <ul>  <li><a href="cheese.html">surveys</a></li>  <li><a href="#">terms & conditions</a></li>  </ul>  </div>  </div>  </li>  </ul>   </nav>' 

css:

@charset "utf-8"; /* css document */ body, html {     margin: 0;     font-family: "lucida grande", "lucida sans unicode", "lucida sans", "dejavu sans", verdana, sans-serif; }  .content {     padding:30px; }  .nav-main {     width:100%;     background-color:#ff6700;     height:70px;     color:#fff; }  .nav-main .logo {     float:left;     height:40px;     padding:15px 30px;     font-size:1.4em;     line-height:40px; }  .nav-main > ul {     margin:0;     padding:0;     float:left;     list-style-type:none; }  .nav-main > ul > li {     float:left; }  .nav-item {     display: inline-block;     padding: 15px 20px;     height: 40px;       line-height:40px     color: #fff;     text-decoration: none;     color: #ffffff; }  .nav-tem:hover {     background-color:#444; }  .nav-content {     position:absolute;     top:70px;     overflow:hidden;     background-color:#222;     color:#fff;     max-height:0;  }  .nav-content {     color:#fff;     text-decoration:none; }  .nav-content a:hover {     text-decoration:underline; }  .nav-sub {     padding:20px; }  .nav-sub ul {     padding:0;     margin:0;     list-style-type:none; }  .nav-sub ul li {     display:inline-block;     padding:5px 0; }  .nav-item:focus {     background-color:#444; }  .nav-item:focus ~ .nav-content {     max-height:400px;     -webkit-transition:max-height 400ms ease-in;     -moz-transition:max-height 400ms ease-in;     transition:max-height 400ms ease-in; }