我有一个简单的固定导航栏，其中一个列表元素有一个下拉悬停。
问题 - 下拉导航使我很难在屏幕达到一定宽度时应用汉堡菜单。
。最初，我尝试创建一个小菜单div，该菜单div将被隐藏，然后以一定宽度显示，但不幸的是，这是不起作用的。
老实说，我对如何做。
这是代码 - 这是Codepen
CSS-
*, *:before, *:after {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/* clear fix */
.c-f::after {
content: "";
display: table;
clear: both;
}
ul, ol {
list-style: none;
margin: 0px;
padding: 0px;
}
.large-trunk {
width: 100%;
max-width: 1700px;
margin-right: auto;
margin-left: auto;
}
.inline-block-container > * {
display: -moz-inline-stack;
display: inline-block;
}
/* Grid Units */
.col-1 {width:100%;}
body {
margin: 0;
}
/* Links ------------------*/
a {
color: #000000;
text-decoration: none;
}
a:hover {
color: #ffd800 !important;
}
#menu-menu a:hover {
text-decoration: underline;
opacity: 0.6;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
/* Typography ------------------*/
html {
font-family: 'Avenir Book', sans-serif;
font-weight: 200;
font-style: normal;
font-size: 15px;
line-height: 1.35em;
}
/* Navigation ------------------*/
.header-menu {
position:fixed;
top:0px;
border-bottom: 1px solid #ddd;
background-color: #fff;
z-index: 10;
}
.header-menu ul li a {
padding: 0 2.5rem;
line-height: 3.5rem;
display: block;
}
.main-menu {
margin: 0px auto;
overflow: hidden;
padding-left: 5rem;
}
.home-logo-container {
float: left;
line-height: 3.5rem;
border-right: 1px solid #ddd;
}
#menu-menu {
text-align:center;
padding-right: 0.6rem;
}
.sub-menu-item {
display: none;
position: absolute;
overflow: hidden;
border: 1px solid #ddd;
}
.sub-menu:hover .sub-menu-item {
display: block;
width: 200px;
}
/* mobile nav ----------------*/
.sm-logo {
display: none;
}
html-
<div class="header-menu col-1">
<!-- .mobile-only-logo -->
<div class="sm-logo">
<img src="">
</div>
<div class="main-menu large-trunk float-container">
<div class="home-logo-container">
<a href="#" class="home-link">
Rare Select  
</a>
</div>
<!-- .main-navigation -->
<nav id="site-nav" class="main-nav float-container">
<div class="menu-container">
<ul id="menu-menu" class="inline-block-container">
<li>
<a href="#">Home</a>
</li>
<li class="sub-menu">
<a href="#">Info</a>
<ul class="sub-menu-item">
<li>
<a href="#">About us</a>
</li>
<li>
<a href="#">T's & C's</a>
</li>
<li>
<a href="#">Find us</a>
</li>
</ul>
</li>
<li>
<a href="#">Newsletter</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
要澄清 - 我只需要使用CSS或jQuery的方法，该方法将在较小的屏幕宽度上显示汉堡菜单。
谢谢
<nav class="navbar navbar-fixed-top navbar-bootsnipp" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" onclick="openMenuNav()">
<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" href="{{ url('/') }}">Rare Select</a>
</div>
<div class="menunav " id="menuNav">
<ul class="nav navbar-nav">
<li>
<a href="#">Home</a>
</li>
<li class="sub-menu">
<a href="#">Info</a>
<ul class="sub-menu-item">
<li>
<a href="#">About us</a>
</li>
<li>
<a href="#">T's & C's</a>
</li>
<li>
<a href="#">Find us</a>
</li>
</ul>
</li>
<li>
<a href="#">Newsletter</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
尝试这个..希望这可以帮助解决您的问题
您无需jQuery或JavaScript即可实现此目标。您需要使用的只是CSS媒体查询。媒体查询允许您仅在满足某些条件时显示内容。在这种情况下，您的视口宽度必须适合某些约束。
媒体查询的基本格式是：
@media (/* Condition */) {
/* CSS for when condition is met. */
}
如果运行以下代码段，则媒体查询仅在屏幕宽度小于768px时出现汉堡菜单。这是因为一旦宽度为768px或更高，就可以满足介质查询，因此CSS运行，并将display属性设置为图像的none。
img {
width: 100px;
display: block;
}
@media (min-width: 768px) {
img {
display: none;
}
}<html>
<body>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/1200px-Hamburger_icon.svg.png">
</body>
</html>您可以在MDN上阅读有关媒体查询的更多信息。https://developer.mozilla.org/en-us/docs/web/css/media_queries/using_media_queries