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

Question

I used this video https://www.youtube.com/watch?v=QPO9HJjUktk to create a CSS dropdown menu with submenus.
I got everything to look right and I have tried linking the list items in the submenus to other .html files and actual websites, but nothing works. When I click on the submenu item to go to whatever page, nothing loads and it just stays on the current page with the submenu open.
HTML:
'<nav class="nav-main">
<div class="logo">Kudler Fine Foods</div>
<ul>
<li> Departments
<div class="nav-content">
<div class="nav-sub">
<ul>
<li>Bakery</li>
<li>Meat & Seafood</li>
<li>Produce</li>
<li>Cheese & Dairy</li>
<li>Wine</li>
</ul>
</div>
</div>
</li>
</ul>
<ul>
<li> Information
<div class="nav-content">
<div class="nav-sub">
<ul>
<li>News</li>
<li>About</li>
<li>Locations</li>
</ul>
</div>
</div>
</li>
</ul>
<ul>
<li> Other
<div class="nav-content">
<div class="nav-sub">
<ul>
<li>Surveys</li>
<li>Terms & Conditions</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 a {
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 a {
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;
}