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时没有悬停。处理它有两种方法。但我的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之外的下拉菜单

1 个答案: