CSS Dropdown菜单水平下降

Question

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

它也会丢失父列表的所有格式，即使我怀疑父CSS中的某些内容会覆盖我尝试做的事情。

我缺少/覆盖什么？

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

#main_nav_list a.main_nav_active_item {
 background: url(images/dynamic/buttonset1/n1activeitem.gif) no-repeat;
 font-family: Arial,sans-serif;
 font-style: normal;
 font-size: 11px;
 font-weight: bold;
 text-decoration: none;
 color: #fff7de;
  }
#main_nav_list a.main_nav_item {
 background: url(images/dynamic/buttonset1/n1.gif) no-repeat;
 font-family: Arial,sans-serif;
 font-style: normal;
 font-size: 11px;
 font-weight: bold;
 text-decoration: none;
 color: #fff7de;
  }
#main_nav_list a.main_nav_item:hover {
 background: url(images/dynamic/buttonset1/n1hover.gif) no-repeat;
 font-family: Arial,sans-serif;
 font-style: normal;
 font-size: 11px;
 font-weight: bold;
 text-decoration: none;
 color: #fff7de;
  }

ul ul{
 display: none;
 list-style: none;
 float: left;
  }
ul> li > ul:hover {
 position: absolute;
 display: block;
  }

Answer 1

https://jsfiddle.net/66esagLq/

您的html中似乎缺少</li>：

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

我想确保这个有效，所以我在这里做了一个小小的改动：

https://jsfiddle.net/66esagLq/1/

添加这些CSS规则：

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