0

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

如果您将鼠标悬停在产品链接上，您会看到我创建了一个下拉效果，但我试图做的是给它一个很好的过渡，而不是仅仅出现。我曾尝试在菜单的各个部分使用 :hover 和 css 过渡，但在研究之后我意识到动画不适用于 display: none; 在上面。请帮忙，

在此先感谢，亚当

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>
4

1 回答 1

3

我可以详细解释，但是这个人做得很好：https ://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/

于 2013-02-11T21:01:01.560 回答