我无法获得菜单下拉淡入淡出效果。 （初学者）

Question

我对编码网站相对较新，我目前正在为自己创建一个在线投资组合，但是我遇到了一个下拉菜单淡入淡出效果，我似乎无法在Jquery或CSS中修复，即使我尝试过不同的教程。 （请注意，我是初学者）

所以我向你们提出的问题是，我需要添加哪些内容才能在我的子菜单上正常运行“投资组合”？

HTML

<nav id="navbar">
    <div id="navbarcontent">
        <ul>
            <a href="index.html">
                <li class="hem">
                    <p>Hem<p>
                </li>
            </a>

            <a href="#">
                <li>
                    Portfolio
                    <ul>

                        <a href="illustrator.html">
                            <li>
                                Illustrator
                            </li>
                        </a>

                        <a href="photoshop.html">
                            <li>
                                Photoshop
                            </li>
                        </a>
                        <a href="illustrator.html">
                            <li>
                                InDesign
                            </li>
                        </a>
                    </ul>   

                </li>

            </a>

CSS

#navbar #navbarcontent ul {
    float:left;
    margin: 0px 0px 4px -32px;
    width:600px;
    padding-top:29px;
}
#navbar #navbarcontent ul li {
    float:left;
    padding: 5px 10px;
}
#navbar #navbarcontent ul a {
    color:white;
    font-weight:bold;
}
#navbar #navbarcontent ul ul {
    display:none;
}
#navbar #navbarcontent ul li.active {
    position: relative;
    float:left;
    cursor:pointer;
}
#navbar #navbarcontent ul li.active:hover {
    background-color:#43b1ff;
}
#navbar #navbarcontent ul li.active > ul {
    display:block;
    position: absolute;
    top:32px;
    left:0px;
    margin-left:0px;
    width:100%;
    padding-top:0px;
}

JQUERY

   $("#navbar ul li").hover(function() {
            $(this).addClass("active");
        }, function() {
            $(this).removeClass("active");
        });

Answer 1

而不是display:hidden到display:block，请从opacity:0转到opacity:1。另外，使用transition:opacity 0.5s在ul上添加转换。您可以调整更改持续时间的时间。请注意，您需要一些浏览器前缀才能获得支持，或者您可以使用此库：http://leaverou.github.io/prefixfree/。