Header Navigation Bar Disappearing When I Use Image Links

Basically, the navbar works perfectly, it stays statically stuck to the top of the screen when the user scrolls. When it is text-only, everything works fine. When I want to add the Twitter and Facebook icons, I can simply do so and it will work. However, as soon as I add an <a href="#"> to enclose the image, it breaks completely. Occasionally, the navbar will work even with the image links, but around 90% of the time it will simply fail, the navbar will not appear, and even though Inspect Element reveals that it should be loaded, nothing is shown.

Relevant:

Working HTML

<div class="" id="header">
    <ul class="menu">
        <li class="menu-item first"><a href="gallery.mywebsite.ca">Gallery</a></li>
        <li class="menu-item second"><a href="charity.mywebsite.ca">Charity</a></li>        
        <li class="menu-item third"><a href="about.mywebsite.ca">About Me</a></li>
        <li class="menu-item fourth"><a href="contact.mywebsite.ca">Contact</a></li>
        <li class="menu-item media"><img src="TaiwanSite_files/twitter.png" height="25">
        &emsp;
        <img src="TaiwanSite_files/fb.png" height="25"></li>

        <li class="menu-top">
            <a href="#intro"><img src="TaiwanSite_files/top-arrow.svg" height="61" width="61"></a>
        </li>

    </ul>
</div>

Broken HTML

<div class="" id="header">
    <ul class="menu">
        <li class="menu-item first"><a href="gallery.mywebsite.ca">Gallery</a></li>
        <li class="menu-item second"><a href="charity.mywebsite.ca">Charity</a></li>        
        <li class="menu-item third"><a href="about.mywebsite.ca">About Me</a></li>
        <li class="menu-item fourth"><a href="contact.mywebsite.ca">Contact</a></li>
        <li class="menu-item media"><a href="https://twitter.com/#"><img src="TaiwanSite_files/twitter.png" height="25"></a>
        &emsp;
        <a href="https://facebook.com/#"><img src="TaiwanSite_files/fb.png" height="25"></a></li>

        <li class="menu-top">
            <a href="#intro"><img src="TaiwanSite_files/top-arrow.svg" height="61" width="61"></a>
        </li>

    </ul>
</div>

The relevant CSS:

.menu {
padding:0;margin:0 auto;position:relative;max-width:1024px;height:2.4em;padding-left:62px;padding-right:62px
}
.menu:after {
display:block;content:"";clear:both
}
.menu-logo {
position:absolute;top:.18em;left:0;right:0;text-align:center;z-index:-1
}
.menu-logo img {
width:4.8em;margin:0;padding:0
}
.menu-item {
display:block;float:left;min-width:20%;text-align:right;height:1.2em;margin-top:.58em
}
.menu-item.first {
text-align:left
}
.menu-item.second {
text-align:left
}
.menu-item.third {
text-align:left
}
.menu-item.fourth {
text-align:left
}
.menu-item.media {
float:right;text-align:right
}
.menu-item a {
text-decoration:inherit;font-family:inherit;color:inherit;font-weight:inherit;line-height:inherit;display:none
}

If there is any additional information I can provide at this time, please inform me and I will try my best to do so. Thank you very much in advance for your time and assistance.