CSS 下拉菜单水平下降

Question

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

它也丢失了父列表的所有格式，尽管我怀疑父列表中的某些内容 CSS 正在覆盖我正在尝试做的事情。

我是什么missing/overwriting？

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

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

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

添加这些 CSS 规则：

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

CSS 下拉菜单水平下降

CSS Dropdown Menu dropping horizontally

css

menu

drop-down-menu