在Dreamweaver中创建带有CSS的下拉菜单，子菜单项不链接

Question

我使用此视频https://www.youtube.com/watch?v=QPO9HJjUktk创建了一个带子菜单的CSS下拉菜单。

我把所有事情看得正确，我尝试将子菜单中的列表项链接到其他.html文件和实际网站，但没有任何作用。当我单击子菜单项以转到任何页面时，没有任何内容加载，它只是保持在当前页面上，子菜单打开。

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 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;
}