html中的菜单响应

我有一个菜单，它在桌面视图上运行得非常好，当鼠标悬停时，一个.gif图像将覆盖在桌面视图上。当设备宽度低于768px时，菜单响应功能正常工作，但图像覆盖出现问题，所有图像均显示，而不是菜单的默认视图

请参阅此链接以查看设计

网页设计使用HTML+引导

CSS

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #000;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transition: .5s ease;
  text-align: center;
}
.overlay img { height: 50px; }
.nav-menu li:hover .overlay { bottom: 0; height: 100%; }

HTML

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">

        <div class="navbar-header">
            <button button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" rel="Menu1" href="#" title="">
                LOGO
            </a>
        </div>

        <div id="navbar" class="collapse navbar-collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav nav-menu">
                <li class="">
                    <a href="#" class="" title="Menu1">
                        <div class="overlay">
                            <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif">
                        </div>
                        Menu1
                    </a>
                </li>
                <li>
                    <a href="#" class="h" title="Menu2">
                        <div class="overlay">
                            <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif">
                        </div>
                        Menu2
                    </a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Menu3">
                        <div class="overlay">
                            <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif">
                        </div>
                        Menu3
                    </a>
                </li>
                <li>
                    <a href="#" class="" title="Menu4">
                        <div class="overlay">
                            <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif">
                        </div>
                        Menu4
                    </a>
                </li>
                <li>
                    <a href="#" class="" title="Menu5">
                        <div class="overlay">
                            <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif">
                        </div>
                        Menu5
                    </a>
                </li>
                <li>
                    <a href="#" class="" title="Menu6">
                        <div class="overlay">
                            <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif">
                        </div>
                        Menu6
                    </a>
                </li>
            </ul>
        </div>

    </div>
</div>

切换导航

这是因为您依赖于基于高度的隐藏，但当它成为折叠菜单时，它不再有该选项。我已经创建了一个媒体查询，它将根据折叠时的位置隐藏它

测试
.覆盖{
位置：绝对位置；
底部：100%；
左：0；
右：0；
背景色：#000；
溢出：隐藏；
宽度：100%；
身高：100%；
过渡：放松；
文本对齐：居中；
}
.overlay img{高度：50px；}
.nav菜单li:hover.overlay{bottom:0；height:100%；}
.navbar inverse.navbar nav>.active>a>.overlay{底部：0；高度：100%；}
@媒体屏幕和屏幕（最大宽度：768px）{
.覆盖{
底部：0！重要；
左：100%！重要；
背景色：红色！重要；
}
.nav菜单li:hover.overlay{left:0！重要；高度：100%；}
}
切换导航

这是因为您依赖于基于高度的隐藏，但当它成为折叠菜单时，它不再有该选项。我已经创建了一个媒体查询，它将根据折叠时的位置隐藏它

测试
.覆盖{
位置：绝对位置；
底部：100%；
左：0；
右：0；
背景色：#000；
溢出：隐藏；
宽度：100%；
身高：100%；
过渡：放松；
文本对齐：居中；
}
.overlay img{高度：50px；}
.nav菜单li:hover.overlay{bottom:0；height:100%；}
.navbar inverse.navbar nav>.active>a>.overlay{底部：0；高度：100%；}
@媒体屏幕和屏幕（最大宽度：768px）{
.覆盖{
底部：0！重要；
左：100%！重要；
背景色：红色！重要；
}
.nav菜单li:hover.overlay{left:0！重要；高度：100%；}
}
切换导航

打开汉堡包菜单时，bootstrap.min.js会抛出错误消息。打开汉堡包菜单时，bootstrap.min.js会抛出错误消息。