JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="nav" role="navigation">
    <a href="#nav" title="Show navigation">Show navigation</a>
    <a href="#" title="Hide navigation">Hide navigation</a>
    <ul>
        <li>
            <ul>                
                <li><a href="#biography"><img src="http://www.victorandalpha.com/images/glyphicons_088_address_book.png"/>Bio</a>
                </li>
                <li><a href="#story"><img src="http://www.victorandalpha.com/images/glyphicons_088_address_book.png"/>Story</a>
                </li>
                <li><a href="#proposal"><img src="http://www.victorandalpha.com/images/glyphicons_271_ring.png"/>Proposal</a>
                </li>
                <li><a href="#gallery"><img src="http://www.victorandalpha.com/images/glyphicons_138_picture.png"/>Gallery</a>
                </li>
                <li><a href="#rsvp"><img src="http://www.victorandalpha.com/images/glyphicons_120_message_full.png"/>RSVP</a>
                </li>
                <li><a href="#thedate"><img src="http://www.victorandalpha.com/images/glyphicons_045_calendar.png"/>The Date</a>
                </li>
                <li><a href="#party"><img src="http://www.victorandalpha.com/images/glyphicons_088_address_book.png"/>Party</a>
                </li>
                <li><a href="#thankyou"><img src="http://www.victorandalpha.com/images/glyphicons_088_address_book.png"/>Thank You</a>
                </li>
                <li><a href="/"><img src="http://www.victorandalpha.com/images/glyphicons_158_show_lines.png"/>Menu</a></li>
            </ul>

        </li>
    </ul>
</nav>
    <section id="annoucement" class="backgroundphotos">
        <p>Lorem ipsum</p>
</section>

CSS

.backgroundphotos {
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            background-attachment: scroll; /* Why does this not carry over? */
            min-height: 800px;

        }

        #annoucement {
            background: url(http://www.victorandalpha.com/images/01.jpg) no-repeat center center fixed;
            background-attachment: scroll; /* This should be the default - not sure why it isn't */
        }
#nav > a {
    display:block;
}
#nav ul {
    list-style:none;
    margin:0;
    padding:0;
}
#nav ul li a {
    text-decoration:none;
    color:black;
}
#nav li {
    position: relative;    
    background-color: white;
}
/* first level */
 #nav > ul > li {
    float: left;
}
/* second level */
 #nav li ul {
    display: block;
    height:0px;
    transition:1s;
}
#nav li ul img {
    display:block;
    /*min-width:100%;*/
    transition:1s;
    margin: 0 auto;
}
#nav li ul img:last-child {
    height: 24px;
    margin: 0 auto;
    /*height:50px;*/
}
#nav li ul li:last-child {
    text-align: center;
    height:80px;
}
#nav li ul li:last-child  {
    padding-top:20px;
    height:55px;
}
#nav li:hover ul li:last-child {
    padding-top:0px;
}
#nav li ul li:not(:last-child) {
    text-align:center;
    height:0px;
    background: rgba(255,255,255,0);
    opacity:0;
    transition:1s;
}
#nav li:hover ul li {
    height: 55px;
    background: rgba(255,255,255,1);
    opacity:1;
}