悬停时CSS3下拉菜单

时间：2014-10-06 05:36:28

标签： html css css3

我想构建一个仅限CSS的菜单。没有jQuery。

我已经做到这一点，但无法从顶部滑入菜单。这是一个fiddle（奇怪的是，它看起来不像我的菜单......但所有风格都在那里）

一些代码：HTML：

<div class="menu">
    <ul>
        <li class="blue"> <a style="text-decoration: none" href="/who-we-are">Who We Are</a>

        </li>
        <li class="red"> <a style="text-decoration: none" href="/services">Services</a>

            <ul>
                <li> <a href="/post1" rel="bookmark" title="Permanent Link to Post 1">Post 1</a>

                </li>
                <li> <a href="/post2" rel="bookmark" title="Permanent Link to Post 2">Post 2</a>

                </li>
                <li> <a href="/post3" rel="bookmark" title="Permanent Link to Post 3">Post 3</a>

                </li>
            </ul>
        </li>
        <li class="orange"><a style="text-decoration: none" href="/packages">Packages</a>

            <ul>
                <li> <a href="/post1" rel="bookmark" title="Permanent Link to Post 1">Post 1</a>

                </li>
                <li> <a href="/post2" rel="bookmark" title="Permanent Link to Post 2">Post 2</a>

                </li>
                <li> <a href="/post3" rel="bookmark" title="Permanent Link to Post 3">Post 3</a>

                </li>
            </ul>
        </li>
        <li class="green"><a style="text-decoration: none" href="/contact-us">Contact</a>

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

我的CSS：

.menu {
    float: left;
    margin-top: 0px;
}
.blue, div.item.blue div {
    color: #009dc4;
}
.red, div.item.red div {
    color: #fe4f00;
}
.orange, div.item.orange div {
    color: #ff5958;
}
.green, div.item.green div {
    color: #50c402;
}
.menu ul li a {
    display: block;
    height: 45px;
    padding-top: 18px;
}
.menu ul li a:visited {
    color: inherit;
}
.menu ul {
    list-style: none;
    margin: 0;
}
.menu ul li {
    display: inline-block;
    position: relative;
    cursor: pointer;
    width: 145px;
    font-family: Georgia;
    height: 45px;
    font-size: 20px;
    line-height: 22px;
    font-weight: bold;
    padding-left: 5px;
    margin-top: 0px;
    margin-right: 46px;
    border-bottom: 5px solid;
    z-index: 5000;
}
.menu ul li:hover {
    color: #ffffff !important;
}
.menu ul li.blue:hover {
    background-color: #009dc4;
    border-bottom: 5px solid #009dc4;
}
.menu ul li.red:hover {
    background-color: #fe4f00;
    border-bottom: 5px solid #fe4f00;
}
.menu ul li.orange:hover {
    background-color: #ff5958;
    border-bottom: 5px solid #ff5958;
}
.menu ul li.green:hover {
    background-color: #50c402;
    border-bottom: 5px solid #50c402;
}
.menu ul li ul {
    display: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 45px;
}
.menu ul li ul li {
    display: block;
    font-size: 12px;
    border-bottom: none;
    width: 145px;
    color: #ffffff;
    padding-left: 0px;
    height: 34px;
    line-height: normal;
    position: relative;
    left: -5px;
}
.menu ul li ul li a {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    height: auto;
    padding: 10px 5px;
    font-size: 12px;
    background-color: #4fc7c1;
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}
.menu ul li ul li a:hover {
    background: #a3edf5;
}
.menu ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}
.menu > ul > li:last-of-type {
    margin-right: 0px;
}

如果有人可以帮助让幻灯片工作，我会很感激。

2 个答案:

答案 0 :(得分：2)

很遗憾，无法使用CSS为height:0制作height:auto动画（从CSS3开始）。但是，使用此处记录的max-height有一种解决方法：http://css3.bradshawenterprises.com/animating_height/

凭借这种逻辑，我从你的JS小提琴创建了一个简单的例子。它所做的就是在下拉max-height:0元素上设置css样式<ul>，为max-height css属性设置一些转换，然后在菜单悬停上设置大max-height值。

不幸的是max-height必须是硬编码的（不能是自动的）所以我们这里有限;但如果您确信您的菜单永远不会超过500px，那么您只需输入500px。

这里是小提琴： http://jsfiddle.net/6ame5wcu/4/

答案 1 :(得分：1)

您需要做的就是设置max-height:0;和overflow:hidden;然后在其上添加transition，如下所示：

.menu ul li ul {
    max-height:0em;
    overflow:hidden;
    position: absolute;
    top: 45px;
    transition:max-height .9s ease
}
:hover上的

设置max-height即max-height:600px; 

.menu ul li:hover ul {
    max-height:600px;
}

DEMO

完整代码：

<div class="menu">
    <ul>
        <li class="blue"> <a href="/who-we-are">Who We Are</a>

        </li>
        <li class="red"> <a href="/services">Services</a>

            <ul>
                <li> <a href="/post1" rel="bookmark" title="Permanent Link to Post 1">Post 1</a>

                </li>
                <li> <a href="/post2" rel="bookmark" title="Permanent Link to Post 2">Post 2</a>

                </li>
                <li> <a href="/post3" rel="bookmark" title="Permanent Link to Post 3">Post 3</a>

                </li>
            </ul>
        </li>
        <li class="orange"><a href="/packages">Packages</a>

            <ul>
                <li> <a href="/post1" rel="bookmark" title="Permanent Link to Post 1">Post 1</a>

                </li>
                <li> <a href="/post2" rel="bookmark" title="Permanent Link to Post 2">Post 2</a>

                </li>
                <li> <a href="/post3" rel="bookmark" title="Permanent Link to Post 3">Post 3</a>

                </li>
            </ul>
        </li>
        <li class="green"><a href="/contact-us">Contact</a>

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

CSS 

a{text-decoration: none}
.menu {
    float: left;
    margin-top: 0px;
}
.blue, div.item.blue div {
    color: #009dc4;
}
.red, div.item.red div {
    color: #fe4f00;
}
.orange, div.item.orange div {
    color: #ff5958;
}
.green, div.item.green div {
    color: #50c402;
}
.menu ul li a {
    display: block;
    height: 45px;
    padding-top: 18px;
}
.menu ul li a:visited {
    color: inherit;
}
.menu ul {
    list-style: none;
    margin: 0;
}
.menu ul li {
    display: inline-block;
    position: relative;
    cursor: pointer;
    width: 145px;
    font-family: Georgia;
    height: 45px;
    font-size: 20px;
    line-height: 22px;
    font-weight: bold;
    padding-left: 5px;
    margin-top: 0px;
    margin-right: 46px;
    border-bottom: 5px solid;
    z-index: 5000;
}
.menu ul li:hover {
    color: #ffffff !important;
}
.menu ul li.blue:hover {
    background-color: #009dc4;
    border-bottom: 5px solid #009dc4;
}
.menu ul li.red:hover {
    background-color: #fe4f00;
    border-bottom: 5px solid #fe4f00;
}
.menu ul li.orange:hover {
    background-color: #ff5958;
    border-bottom: 5px solid #ff5958;
}
.menu ul li.green:hover {
    background-color: #50c402;
    border-bottom: 5px solid #50c402;
}
.menu ul li ul {
    max-height:0em;
    overflow:hidden;
    position: absolute;
    top: 45px;
    transition:max-height .9s ease
}
.menu ul li:hover ul {
    max-height:600px;
}
.menu ul li ul li {
    display: block;
    font-size: 12px;
    border-bottom: none;
    width: 145px;
    color: #ffffff;
    padding-left: 0px;
    height: 34px;
    line-height: normal;
    position: relative;
    left: -5px;
}
.menu ul li ul li a {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    height: auto;
    padding: 10px 5px;
    font-size: 12px;
    background-color: #4fc7c1;
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}
.menu ul li ul li a:hover {
    background: #a3edf5;
}

.menu > ul > li:last-of-type {
    margin-right: 0px;
}
相关问题
最新问题