CSS菜单转换 [英] CSS Menu Transition

问题描述

JSFiddle： http://jsfiddle.net/x6bM3/

JSFiddle: http://jsfiddle.net/x6bM3/

如果你将鼠标悬停在产品链接上，你会看到我创建了一个下拉效果，但是我想做的是给它一个很好的过渡，而不是它刚刚出现。
我已经尝试使用：hover与菜单的各个部分的css转换，但研究后，我意识到动画不会与display：none;在上面。请帮助，

If you hover over the products link you will see i have created a drop down effect, but what im trying to do is give it a nice transition instead of it just appearing. I have tried using :hover with the css transitions on various parts of the menu, but after researching it i realised the animation wont work with display: none; on it. Please help,

提前感谢
Adam

Thanks in advance, Adam

CSS：

nav ul ul {
    display: none;
}
nav ul li:hover > ul {
    display: block;
}
nav ul {
    list-style: none;
    position: relative;
    display: inline-table;
    margin-top: 23px;
    padding: 0;
    float: left;
}
nav ul:after {
    content:"";
    display: block;
}
nav ul li {
    float: left;
    height: 50px;
    width: auto;
    padding: 5px;
    margin-left: 22px;
}
nav ul li a {
    display: block;
    text-decoration: none;
}
nav ul ul {
    background: #363c43;
    border-radius: 3px;
    border: 1px solid #2e363f;
    padding: 7px;
    position: absolute;
    font-size: 0.9em;
}
nav ul ul:before {
    content:'';
    display:block;
    width:0;
    height:0;
    position:absolute;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-bottom:10px solid #363c43;
    top:-8px;
    left: 30px;
}
nav ul ul li {
    height: 30px;
    float: none;
    position: relative;
    padding: 0px 0px 5px 0px;
    margin: 0px;
}
/* Other base styles */
 * {
    font-family: arial;
}
a:link, a:visited {
    color: #979797;
    font-size: 1.145em;
    /* 18px */
    text-decoration: none;
    font-weight: lighter;
    -webkit-transition: all .25s linear;
    transition: color .25s linear;
}
a:hover {
    color: #c4c1c1;
    font-size: 1.145em;
    /* 22px */
    text-decoration: none;
}

HTML：

<nav>
    <ul class="menu">
        <li><a href="index.php">home</a>
        </li>
        <li><a href="index.php">products</a>

            <ul>
                <li><a href="#">product 1</a>
                </li>
                <li><a href="#">product 2</a>
                </li>
            </ul>
        </li>
        <li><a href="index.php">solutions</a>
        </li>
    </ul>
</nav>

推荐答案

我可以详细解释，伟大的工作： http://stackoverflow.com/a/3332179/363605

I can explain in detail, but this person does a great job: http://stackoverflow.com/a/3332179/363605

nav ul ul {
    display: block;
    -webkit-transition: opacity 1s ease-in;
    -moz-transition: opacity 1s ease-in;
    -o-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
    opacity: 0; 
    height: 0;
    overflow: hidden;
}
nav ul li:hover > ul {
    height: auto;
    opacity: 1;
}

http://jsfiddle.net/pYhrk/

这篇关于CSS菜单转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！