HTML5子菜单显示为主菜单选项

Question

我需要在政策部分添加子菜单，并且我是HTML的新手。这是用Razor在ASP.NET中编写的。我在下面附上了我的HTML和CSS代码。

我看到的是显示子菜单而不将鼠标悬停在“策略”菜单选项上。我已将此代码与其他几个代码进行了比较，但我看不出我做错了什么。任何帮助都是非常明确的。

有关详细信息，请参阅http://www.naturalninefishing.com。

我在_SiteLayout.cshtml文件中有以下HTML代码：

<nav>
 <ul id="menu">
   <li><a href="~/">Home</a></li>
   <li><a href="~/About">About</a></li>
   <li><a href="~/Contact">Contact</a></li>
   <li><a href="~/Photos">Photos</a></li>
   <li><a href="~/Crew">Crew</a></li>
   <li>
     <a href="#">Policies</a>
       <ul id="menu">
         <li><a href="~/Policies.cshtml">Shipboard Rules and Regulations</a></li>
         <li><a href="~/PrivacyStatement.cshtml">Privacy Statement</a></li>
         <li><a href="~/termsofservice.cshtml">Terms of Service</a></li>
        </ul>
   </li>
   <li><a href="~/Store">Store</a></li>
 </ul>
</nav>

在我的CSS中，我有以下菜单：

ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: right;
}

    ul#menu li {
        display: inline;
        list-style: none;
        padding-left: 15px;
    }

        ul#menu li a {
            background: none;
            color: #999;
            text-decoration: none;
        }

        ul#menu li a:hover {
            color: #333;
            text-decoration: none;
        }

提前致谢！