CSS下拉菜单水平放置

我在一个网站上工作，这个网站是几年前由我的雇主建立的，我正试图实现一个只使用CSS的下拉菜单。但是，当您将鼠标悬停在其上时，它不会下降，而是水平下降，如下所示：

它还会丢失父列表的所有格式，即使我怀疑父CSS中的某些内容正在覆盖我正在尝试执行的操作

我缺少/覆盖了什么

HTML

看起来您的html中缺少了一个

：

 <div id="main_nav_container"> 
  <ul id="main_nav_list">
        <li><a class="main_nav_item" href="index.html">Home</a></li>
        <li><a class="main_nav_item" href="history.html">History</a></li>
        <li><a class="main_nav_item" href="products.html">Products</a>
            <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
                <li><a href="#">Item 5</a></li>
            </ul>
        </li> <!-- here -->
        <li><a class="main_nav_item" href="news.html">News</a></li>
        <li><a class="main_nav_item" href="links.html">Links</a></li>
        <li><a class="main_nav_item" href="contact.html">Contact</a></li>
    <ul>
</div>

我想确保这一切正常，所以我对小提琴做了一个小改动：

添加以下CSS规则：

ul li {
    list-style-type: none;
    display: inline-block;
}
ul ul li {
    display: block;
}

---

看起来您需要父级

li

上的

position:relative

和一些

top、left

值以使其看起来更美观。您没有关闭li

结束标记是可选的。您确定这与OP的源有不同的结果吗？@MrLister它们在某些情况下是可选的，而不是全部。“如果li元素后面紧跟着另一个li元素，或者父元素中没有更多内容，则可能会忽略li元素的结束标记。”我不知道任何有效的html会正确编译，但缺少

，但我也做了一个小小的css更改，修复了它并添加了一个JSFIDLE。@CBauer我复制了您更改的所有内容，它可以在小提琴中工作，看起来很棒，但仍然在我的文档中水平放置。所以看起来在以前的css或链接的javascript中有什么东西覆盖了它？我已经梳理了我的css，还没有发现问题。关于我在寻找什么有什么想法吗？你必须发布你所有的CSS让我回答这个问题。理想情况下，您可以在我提供的JSFIDLE中这样做，并使问题重现。此外，这可能是CSS的特殊性问题。您可以使用内置的浏览器工具，检查覆盖了哪些css规则。

 <div id="main_nav_container"> 
  <ul id="main_nav_list">
        <li><a class="main_nav_item" href="index.html">Home</a></li>
        <li><a class="main_nav_item" href="history.html">History</a></li>
        <li><a class="main_nav_item" href="products.html">Products</a>
            <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
                <li><a href="#">Item 5</a></li>
            </ul>
        </li> <!-- here -->
        <li><a class="main_nav_item" href="news.html">News</a></li>
        <li><a class="main_nav_item" href="links.html">Links</a></li>
        <li><a class="main_nav_item" href="contact.html">Contact</a></li>
    <ul>
</div>

ul> li:hover > ul {
     position: absolute;
     display: block;
}

ul li {
    list-style-type: none;
    display: inline-block;
}
ul ul li {
    display: block;
}