响应式设计 - 下拉菜单高度冲突

Question

请先访问我的网页tristans.ml/..，然后将浏览器窗口缩小到1000px宽，然后打开菜单就可以解决问题了。 我不知道解决这个问题的好方法。代码如下： 首先是css中的媒体查询：

@media all and (max-width:1000px){
    #nav_holder{
        width:100%;
        height:54px;
        z-index:2;
    }
    nav{
    }
    .first_menu{
        display:none;
    background:#161619;
    }
    .logo_b{
    top:0;
        float:right;
        display:block;
    }
    #logo{
        padding:0;
    }
    #ttrgovina{
        width: 200px;
    }
    #container{
        margin-top:54px;
    }
}

然后是html代码（对不起，如果它是一团糟）：

<div id="nav_holder">
    <div id="logo">
        <span class="logo_b" id="nav_button"><img width="55" height="55" src="style/images/menu.png" alt="Menu"></span>
        <span class="logo_b" id="cart_button"><img width="55" height="55" src="style/images/cart.png" alt="Cart"></span>
    </div>
    <nav>
        <span id="ttrgovina">Tshop</span>
        <ul class="first_menu">
            <li>
                <a id="menu_1" href="javascript:void();">Komponente</a>
                <ul class="second_menu"></ul>
            </li>
        </ul>
    </nav>
</div>

注意：代码已缩短。只删除了li元素。

请你帮我解决这个问题，因为我现在已经坚持了很长时间。我也试过创建2个菜单，但我认为这是浪费时间。如果您需要更多数据或其他任何内容，请发表评论。