gpt4 book ai didi

css - 下拉菜单向上飞

转载 作者:行者123 更新时间:2023-11-28 08:33:52 25 4
gpt4 key购买 nike

我制作了一个 css 下拉菜单,它使子菜单淡入/淡出。

但是,我想将效果更改为淡入和向上飞,如下所示: http://css3menu.com/paradox-amethyst.html

那怎么可能呢?

现在我有以下 html 和 css:

<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Photos</a>
<ul>
<li><a href="#">Zoo</a></li>
<li><a href="#">Sky</a></li>
<li><a href="#">Pie</a>
<ul>
<li><a href="#">Zoo</a></li>
<li><a href="#">Sky</a></li>
<li><a href="#">Pie</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>

* {
margin: 0;
padding: 0;
}

li {
list-style-type: none;
position: relative;
background: none repeat scroll 0 0 #444;
}

ul.menu > li {
float: left;
min-width: 100px;
padding: 5px;
}

ul.menu a {
display: inline-block;
width: 100%;
color: white;
}

ul.menu > li > ul {
position: absolute;
top: 30px;
left: 0;
width: 100%;
visibility: hidden;
opacity: 0;
transition: all 0.2s;
}

ul.menu li ul > li > ul {
position: absolute;
top: 00px;
left: 100%;
width: 100%;
visibility: hidden;
opacity: 0;
transition: all 0.2s;
}

.menu li:hover {
background: maroon;
}

.menu li:hover > ul {
visibility: visible;
opacity: 1;
}

http://jsfiddle.net/5b5hckjh/

最佳答案

好吧,你可以很容易地完成它:

  • child <ul> s 最初是隐藏的,当你将鼠标悬停在他们的 parent 身上时,他们会出现,从顶部给他们一些空间,比如 top: 200px;
  • 然后在悬停时,为直接子级减少顶部空间,比如说 100%,这样它们将从顶部偏移 100%(导航栏的高度),而子级子级,顶部:0,所以他们会和他们的 parent 保持一致。

查看 demo here 或下面的片段:

* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
position: relative;
background: none repeat scroll 0 0 #444;
}
ul.menu > li {
float: left;
min-width: 100px;
padding: 5px;
}
ul.menu a {
display: inline-block;
width: 100%;
color: white;
}
ul.menu > li > ul {
position: absolute;
top: 100px;
/*this is the offset from the top, play around with it, pixel percentage what ever works best for you*/
left: 0;
width: 100%;
visibility: hidden;
opacity: 0;
transition: all 0.2s;
}
ul.menu li ul > li > ul {
position: absolute;
top: 100px;
/*this is the offset from the top, play around with it, pixel percentage what ever works best for you*/
left: 100%;
width: 100%;
visibility: hidden;
opacity: 0;
transition: all 0.2s;
}
.menu li:hover {
background: maroon;
}
/*the direct children*/

.menu li:hover > ul {
visibility: visible;
opacity: 1;
top: 100%;
}
/*the secondary children*/

.menu li li:hover > ul {
top: 0;
}
<ul class="menu">
<li><a href="#">Home</a>
</li>
<li><a href="#">Photos</a>
<ul>
<li><a href="#">Zoo</a>
</li>
<li><a href="#">Sky</a>
</li>
<li><a href="#">Pie</a>
<ul>
<li><a href="#">Zoo</a>
</li>
<li><a href="#">Sky</a>
</li>
<li><a href="#">Pie</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a>
</li>
</ul>

关于css - 下拉菜单向上飞,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28155404/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com