CSS

Question

我正在使用 CSS 创建下拉菜单。但是，当我 select 菜单时，它 select 在 space 中，列表将出现并来自 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 无需悬停即可显示的情况。处理它有两种方法。但我的 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/

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

CSS - Drop down menu appearing outside UL

html

drop-down-menu

nav