CSS - 出现在 UL 之外的下拉菜单

Question

我正在使用 CSS 创建一个下拉菜单。但是，当我选择菜单时，它会在列表将出现的空间中以及从 UL 中选择。不只是 UL，如果这有意义的话，我无法弄清楚它为什么这样做。请看示例代码：-

CSS：-

#navigation .menu ul {position:absolute; top:45px; left:0px; opacity:0; background:black; transition:opacity .25s ease; -webkit-transition:opacity .25s ease;}
#navigation .menu li:hover > ul {opacity:1; margin:0;}
#navigation .menu ul li {height:25px; width:200px; overflow:hidden; border-bottom:red 1px solid; border-left:none; margin:none; transition:opacity .25s ease; -webkit-transition:height .25s ease;}
#navigation .menu ul li:hover {overflow:hidden; margin:0;}
#navigation .menu ul li a {text-decoration:none; height:25px; width:200px;}
#navigation .menu ul li:last-child {border-bottom:none;}

HTML 代码：-

<div id="navigation"> <nav> <ul class="menu"> 

        <li> <a href="Option.html"> <h1> Homepage </h1> </a> </li>

        <li> <a href="Option2.html"> About </a> <ul class="ulbox">

                <li class="dm"> <a href="Option1.html"> <img src="images/Avengers.jpeg" width="25" /> The Site </a></li>
                <li class="dm"> <a href="Option2.html"> <img src="images/Doctor Strange.jpeg" width="25" /> Find Us </a></li>
                <li class="dm"> <a href="Option3.html"> <img src="images/Guardians.jpeg" width="25" /> The Company </a></li>
                <li class="dm"> <a href="Option4.html"> <img src="images/Inhumans.jpeg" width="25" /> Contrived Page </a></li>
                <li class="dm"> <a href="Option5.html"> <img src="images/Thor.jpeg" width="25" /> Drop Down Success </a></li>

</ul>  </li>
        <li> <a href="Option3.html"> Images </a> <ul>

                <li> <a href="Option1.html"> The Site </a></li>
                <li> <a href="Option2.html"> Find Us </a></li>
                <li> <a href="Option3.html"> The Company </a></li>
                <li> <a href="Option4.html"> Contrived Page </a></li>
                <li> <a href="Option5.html"> Drop Down Success </a></li>

 </ul> </li> 
            <li> <a href="Option4.html"> The next page </a> <ul>

                <li> <a href="Option1.html"> The Site </a></li>
                <li> <a href="Option2.html"> Find Us </a></li>
                <li> <a href="Option3.html"> The Company </a></li>
                <li> <a href="Option4.html"> Contrived Page </a></li>
                <li> <a href="Option5.html"> Drop Down Success </a></li>

 </ul> </li>
            <li> <a href="Option5.html"> Terms and Stuff  </a> <ul>

                <li> <a href="Option1.html"> The Site </a></li>
                <li> <a href="Option2.html"> Find Us </a></li>
                <li> <a href="Option3.html"> The Company </a></li>
                <li> <a href="Option4.html"> Contrived Page </a></li>
                <li> <a href="Option5.html"> Drop Down Success </a></li>

 </ul> </li> </ul> </nav> </div>

我看不出为什么菜单会从 UL 导航栏外显示。有人可以帮忙吗？

Answer 1

CSS 有几个问题。

• 首先：position: absolute 会将元素从流中移除。所以不会算作存在的东西来计算兄弟元素和父元素的位置。
• 第二：您期望的显示仍然使用sub Menu 流。为了让另一个parent Menu流下来。所以你不能使用position: absolute。通过删除它，您将恢复菜单的流程。 （position: relative; 不是必需的，我只是把它留在那里，因为懒得删除它）
• 第三：现在你遇到了sub Menu 正在显示而不悬停。处理它有2种方法。但我的 jsfiddle 只使用一个。只需将display: none 添加到sub Menu。然后是display: block，当它的父级悬停时。 (1)

#navigation .menu ul {
  display: none;
  z-index: 1;
  position:relative; 
}
#navigation .menu li:hover > ul {opacity:1; margin:0; display: block}

(2)

注意：

(1): 如果你想让它在动画中看起来不错。将max-heigth: 0 属性用作transition。 （而不是使用display: none;

(2)：z-index 和 position:relative; 不是必需的。只是你需要删除position: absolute 然后它会工作

http://jsfiddle.net/7r7zLuar/3/