Html 循环下拉菜单的问题

我正在菜单上为我的博客写一篇文章。 我正在尝试创建一个循环下拉菜单。当所有浏览器上都有两个子菜单或多个子菜单时，它可以正常工作。但如果父菜单只有一个子菜单，它将显示在其预期位置的下方

以下是JSFIDLE中以下代码的工作副本：

我知道问题出在

#菜单容器ul li:hover>ul

选择器中， 这是有边际的。但若我去掉这个空白，那个么有两个或更多子菜单的顶部菜单会向上显示，并且显示在它们预期位置的上方。 请帮助我，因为我在这个问题上找不到合适的解决方案

以下是HTML代码：

<div id="menucontainer">
  <ul id="hmenu">
    <li><a href="http://techisquest.blogspot.com/">Home</a>
      <ul>
        <li><a href="http://techisquest.blogspot.com/">Test 1</a></li>
        <li><a href="http://techisquest.blogspot.com/">Test 2</a></li>
        <li><a href="http://techisquest.blogspot.com/">Test 3</a></li>
        <li><a href="http://techisquest.blogspot.com/">Test 3</a></li>
      </ul>
    </li>
    <li><a href="http://techisquest.blogspot.com/">About</a>
      <ul>
        <li><a href="http://techisquest.blogspot.com/">Test 1</a></li>
        <li><a href="http://techisquest.blogspot.com/">Test 2</a></li>
      </ul>
    </li>
    <li><a href="http://techisquest.blogspot.com/">Contact Us</a>
      <ul>
        <li><a href="http://techisquest.blogspot.com/">Test 1</a></li>
      </ul>
    </li>
    <li><a href="http://techisquest.blogspot.com/">Info</a>
      <ul>
        <li><a href="http://techisquest.blogspot.com/">Test 2</a></li>
        <li><a href="http://techisquest.blogspot.com/">Test 3</a></li>
      </ul>
    </li>
  </ul>
</div>

---

这与您在下拉菜单中只有一项无关。您可以尝试添加更多内容，并看到它仍在发生。真正的原因是“联系我们”按钮占用两行，而不是像其他按钮一样占用一行

通过为

锚定设置固定高度来解决此问题


只要对css进行一些更改，您就完成了：-

#menucontainer ul li > ul {
    display : none;
    overflow: hidden;
    position: absolute; //implement absolute
    border-bottom: solid 1px;
    border: 0px;
    height: 0px;
    width: 100%;
    top:90px; //add top
}
#menucontainer ul li:hover > ul {
    z-index: 10;
    float: none;
    left: -15px;
    margin: 5px; //change it to this
    height: auto;
    padding: 0px 5px 0px 0px;
    display:block;
    width: 100px;
}

工作小提琴：-
减少你的例子。创建一个最小的菜单，在尽可能多地删除CSS和HTML后，仍然可以显示问题。很有可能在这个过程中，你已经发现了问题所在，而实际上你并不需要我们的帮助。
#menucontainer ul li a {
    height:33px;
}

#menucontainer ul li > ul {
    display : none;
    overflow: hidden;
    position: absolute; //implement absolute
    border-bottom: solid 1px;
    border: 0px;
    height: 0px;
    width: 100%;
    top:90px; //add top
}
#menucontainer ul li:hover > ul {
    z-index: 10;
    float: none;
    left: -15px;
    margin: 5px; //change it to this
    height: auto;
    padding: 0px 5px 0px 0px;
    display:block;
    width: 100px;
}