导航的响应式设计不起作用

Question

我已经完成了桌面屏幕的设计，但它不适用于手机。我想知道这个问题是什么。这是我的编码。

HTML

<div id="nav">
            <span id="nav-icon"> <img src="assets/images/icon/navigation.png" alt="nav-menu"> </span>
            <ul>
                <li> <a href="#"> LINK </a> </li>
                <li> <a href="#"> LINK </a> </li>
                <li> <a href="#"> LINK </a> </li>
                <li> <a href="#"> LINK </a> </li>
                <li> <a href="#"> LINK </a> </li>
            </ul>

            <div class="navimage">
                <a href="#"> <img src="facebook-icon.png" alt="facebook-icon" /> </a>
                <a href="#"> <img src="twitter-icon.png" alt="twitter-icon" /> </a> 
            </div>
        </div>

的style.css

#nav {
    border-bottom:1px solid #FFF;
    margin-bottom:20px;
    padding:0;
    text-align:center;
    max-width:95%;
    margin:0 auto;
}

#nav #nav-icon img {
    display:none;
}

#nav li {
    display:inline;
}

#nav a {
    display:inline-block;
    padding:15px;
    font-family: 'alegreya_sansregular', sans-serif;
    font-weight:bold;
    font-size:15px;
    margin:15px 0;
}

#nav a:hover {
    color:#DEB887;
    text-decoration:none;
}

.navimage img {
    width:30px;
    height:30px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    -o-border-radius:50%;
}

.imgnav img {
    margin-left:-25px;
}

.navimage {
    float:right;
    margin-top:-80px;
}

responsive.css

@media only screen and (min-width: 480px) and (max-width: 767px) {

    #nav {text-align:left;}
    #nav-icon img {display:inline-block;height:40px;}
    #nav ul, #nav:active ul {display:none;position:absolute;padding: 20px;background:#fff;border: 3px solid #DEB887;left:35px;top:70px;width:20%;border-radius:0 0 3px 3px;z-index:9999;}
    #nav:hover ul {display:block;}
    .navimage {margin-top:-300px;}
    #nav li {text-align:center;display:block;}
    #nav ul li a {color:#000;padding:0;}
}

问题是 1.图像（导航菜单）根本没有显示。 2.无法看到Facebook和Twitter徽标。 3.我将鼠标悬停在某个站点的某个位置，但导航栏随机显示（没有任何导航菜单图片）

这是JSFIDDLE ..

全部用于移动屏幕（最小宽度：480px和最大宽度：767px）。有什么想法吗？