CSHTML-如何使无序列表项水平排列？

我正在为工作创建一个更新的Intranet站点，需要知道如何水平对齐列表项。我知道这是用CSS完成的，但我在找出bug的位置时遇到了一点问题，这使得它保持水平

\u siteloayout.cshtml

<ul id="menu">
    <li> <a href="~/">Home</a> </li>
    <li><a href="~/About">About</a></li>
    <li class="sub_menu">
        <a href="~/Departments">Departments</a>
        <ul>
            <li> <a href="#">Equipment Design</a></li>
            <li> <a href="#">Operations</a></li>
            <li> <a href="#">Works</a></li>
            <li> <a href="#">Ecors</a></li>
        </ul>
        </li>
    <li class="sub_menu">
        <a href="~/Company">Company</a>
        <ul>
            <li> <a href="#">Environment</a></li>
            <li> <a href="#">Health & Safety</a></li>
            <li> <a href="#">Human Resources</a></li>
            <li> <a href="#">Quality Assurance</a></li>
            <li> <a href="#">Timesheet</a></li>
            <li> <a href="#">HS Helpdesk</a></li>
        </ul>
    </li>
    <li class="sub_menu">
        <a href="~/Resources">Resources</a>
        <ul id="sub_menu">
            <li> <a href="#">Telephone Directory</a></li>
            <li> <a href="#">Webmail</a></li>
        </ul>
    </li> 
    <li><a href="~/Contact">Contact</a></li>
</ul>

---

从

#menu>li

中删除

清除：两个
，这当前有效地覆盖了已应用的
浮动：左
，从而重新启动新行上的每个项目

将
#菜单>li
更改为

#menu > li {
    display: inline-block;
    list-style: none;
    padding-left: 15px;
    clear: both; /**/
    height: 2em; /**/
    list-style-type: none;
}

似乎也能起作用。更改是删除第二个
显示
并更改
显示：内联
显示：内联块
谢谢，现在可以用了。但每当我试图通过VisualStudio在InternetExplorer上运行站点时，它都不是水平的。但它可以在Chrome和FF上运行，所以现在就可以了。实际上，VisualStudio并没有正确渲染。我在我的dev服务器上加载了这个站点，它运行得很好，干杯！
#menu > li {
    display: inline-block;
    list-style: none;
    padding-left: 15px;
    clear: both; /**/
    height: 2em; /**/
    list-style-type: none;
}