Why isn't my opacity transition time (CSS) working? Everything else in the CSS block works?

Question

I have a navigation menu set up so the submenu appears on hover (by changing the opacity). You can view the site here.

The issue I'm having, is I want a slow fade in (1.4 seconds) but the fade in broke and the submenu now appears instantly, which is jarring.

The relevant code is below or you can view the GitHub repo here. Thanks so much for your help and let me know if you need any more information!

.dropdown-content {
position: absolute;
z-index: 1;
line-height: 12px;
opacity: 0;
margin-top: -400px;
font-size: 14px;
display: none;
}

.dropdown:hover .dropdown-content {
display: block;
margin-left: 90px;
margin-top: -3.3em;
opacity: 1;
transition: opacity 1.4s ease;
}

<div class="dropdown">
    <p>Weddings</p>
    <div class="dropdown-content">
        <a href="#">Alvin & Johanna</a>
        <a href="#">Jenn & Matt</a>
        <a href="#">Taylor & Craig</a>
        <a href="#">Greg & Jocelyn</a>
    </div>
</div>

Answer 1

The reason is your display parameter. If you set it to block for both states (or erase it from both rules, leaving them at the default setting), the opacity animation will work:

.dropdown-content {
position: absolute;
z-index: 1;
line-height: 12px;
opacity: 0;
margin-top: -400px;
font-size: 14px;
display: block;
}

.dropdown:hover .dropdown-content {
display: block;
margin-left: 90px;
margin-top: -3.3em;
opacity: 1;
transition: opacity 1.4s ease;
}

<div class="dropdown">
    <p>Weddings</p>
    <div class="dropdown-content">
        <a href="#">Alvin & Johanna</a>
        <a href="#">Jenn & Matt</a>
        <a href="#">Taylor & Craig</a>
        <a href="#">Greg & Jocelyn</a>
    </div>
</div>