Listo si te das cuenta, hay un script que ayuda con el menu en dispositivos como tablets y smartphones, con esta estructura puedes modificar el tuyo, muy buen día, saludos desde Bogotá Colombia.
Listo si te das cuenta con esta estructura puedes modificar el tuyo, muy buen día, saludos desde Bogotá Colombia.
Listo si te das cuenta, hay un script que ayuda con el menu en dispositivos como tablets y smartphones, con esta estructura puedes modificar el tuyo, muy buen día, saludos desde Bogotá Colombia.
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="estilosmenu.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<title>menuresponsive</title>
</head>
<body>
<nav>
<div>
<i class="material-icons">menu</i>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Drop 1 <i class="material-icons">arrow_drop_down</i></a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
<li><a href="#">Product 4</a></li>
</ul>
</li>
<li><a href="#">Drop 2 <i class="material-icons">arrow_drop_down</i></a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
<li><a href="#">Product 4</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</nav>
<script type="text/javascript">
$("nav div").click(function (){
$("ul").slideToggle();
$("ul ul").css("display", "none");
});
$("ul li").click(function(){
$("ul ul").slideUp();
$(this).find('ul').slideToggle();
});
$(window).resize(function(){
if($(window).whidth() > 768) {
$("ul").removeAttr('style');
}
});
</script>
</body>
</html>
Después el Css
menuresponsivehtml {<nav>
font-family: 'Poppins', sans-serif;
}
body { <div>
padding: 0;
margin:<i 0;
}class="material-icons">menu</i>
</div>
ul { <ul>
margin: 0; <li><a href="#">Home</a></li>
padding: 0;
<li><a list-style-type:href="#">Drop none;1 <i class="material-icons">arrow_drop_down</i></a>
background: #e3e3e3;
position: relative;
}
ul li {<ul>
display: inline-block;
}
ul li a {
color: #292929;
<li><a text-decoration:href="#">Product none;1</a></li>
padding: 15px;
display: block;
}
ul li:hover {
background:<li><a lightgrey;
}
href="#">Product 2</a></li>
ul ul {
position: absolute;
min-width: 200px;
background:<li><a lightgrey;href="#">Product 3</a></li>
display: none;
}
ul ul li {
display: block;
<li><a background:href="#">Product #e3e3e3;
}
4</a></li>
ul li:hover ul {
display: block;
}
ul li i { </ul>
color: #292929; </li>
float: right;
<li><a padding-left:href="#">Drop 5px;
}
nav2 div<i {class="material-icons">arrow_drop_down</i></a>
background: lightgrey;
color: #292929; <ul>
font-size: 24px;
padding: 0.6em;
cursor: pointer; <li><a href="#">Product 1</a></li>
display: none;
}
@media(max-width: 768px) {
nav div<li><a {href="#">Product 2</a></li>
display: block; <li><a href="#">Product 3</a></li>
}
<li><a href="#">Product 4</a></li>
ul { </ul>
</li>
display: none; <li><a href="#">About</a></li>
<li><a href="#">FAQ</a></li>
position: static;</ul>
</nav>
<script type="text/javascript">
$("nav div").click(function (){
background: #e3e3e3;$("ul").slideToggle();
}
$("ul ul").css("display", "none");
});
ul li$("ul li").click(function(){
$("ul ul").slideUp();
display: block;
$(this).find('ul').slideToggle();
});
$(window).resize(function(){
ul ul {
if($(window).whidth() > 768) {
position: static;
$("ul").removeAttr('style');
background: #e3e3e3;}
});
}
}</script>
Después el Css
$("nav div").click(function (){
$("ul").slideToggle();
$("ul ul").css("display", "none");
});
$("ul li").click(function(){
$("ul ul").slideUp();
$(this).find('ul').slideToggle();
});
$(window).resize(function(){
if($(window).whidth() > 768) {
$("ul").removeAttr('style');
}
});
html {
font-family: 'Poppins', sans-serif;
}
body {
padding: 0;
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
background: #e3e3e3;
position: relative;
}
ul li {
display: inline-block;
}
ul li a {
color: #292929;
text-decoration: none;
padding: 15px;
display: block;
}
ul li:hover {
background: lightgrey;
}
ul ul {
position: absolute;
min-width: 200px;
background: lightgrey;
display: none;
}
ul ul li {
display: block;
background: #e3e3e3;
}
ul li:hover ul {
display: block;
}
ul li i {
color: #292929;
float: right;
padding-left: 5px;
}
nav div {
background: lightgrey;
color: #292929;
font-size: 24px;
padding: 0.6em;
cursor: pointer;
display: none;
}
@media(max-width: 768px) {
nav div {
display: block;
}
ul {
display: none;
position: static;
background: #e3e3e3;
}
ul li {
display: block;
}
ul ul {
position: static;
background: #e3e3e3;
}
}
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="estilosmenu.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<title>menuresponsive</title>
</head>
<body>
<nav>
<div>
<i class="material-icons">menu</i>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Drop 1 <i class="material-icons">arrow_drop_down</i></a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
<li><a href="#">Product 4</a></li>
</ul>
</li>
<li><a href="#">Drop 2 <i class="material-icons">arrow_drop_down</i></a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
<li><a href="#">Product 4</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</nav>
</body>
</html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="estilosmenu.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<title>menuresponsive</title>
</head>
<body>
<nav>
<div>
<i class="material-icons">menu</i>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Drop 1 <i class="material-icons">arrow_drop_down</i></a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
<li><a href="#">Product 4</a></li>
</ul>
</li>
<li><a href="#">Drop 2 <i class="material-icons">arrow_drop_down</i></a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
<li><a href="#">Product 4</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</nav>
<script type="text/javascript">
$("nav div").click(function (){
$("ul").slideToggle();
$("ul ul").css("display", "none");
});
$("ul li").click(function(){
$("ul ul").slideUp();
$(this).find('ul').slideToggle();
});
$(window).resize(function(){
if($(window).whidth() > 768) {
$("ul").removeAttr('style');
}
});
</script>
</body>
</html>
Después el Css
html {
font-family: 'Poppins', sans-serif;
}
body {
padding: 0;
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
background: #e3e3e3;
position: relative;
}
ul li {
display: inline-block;
}
ul li a {
color: #292929;
text-decoration: none;
padding: 15px;
display: block;
}
ul li:hover {
background: lightgrey;
}
ul ul {
position: absolute;
min-width: 200px;
background: lightgrey;
display: none;
}
ul ul li {
display: block;
background: #e3e3e3;
}
ul li:hover ul {
display: block;
}
ul li i {
color: #292929;
float: right;
padding-left: 5px;
}
nav div {
background: lightgrey;
color: #292929;
font-size: 24px;
padding: 0.6em;
cursor: pointer;
display: none;
}
@media(max-width: 768px) {
nav div {
display: block;
}
ul {
display: none;
position: static;
background: #e3e3e3;
}
ul li {
display: block;
}
ul ul {
position: static;
background: #e3e3e3;
}
}
<html lang="es">
menuresponsive<nav>
<div>
<i class="material-icons">menu</i>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Drop 1 <i class="material-icons">arrow_drop_down</i></a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
<li><a href="#">Product 4</a></li>
</ul>
</li>
<li><a href="#">Drop 2 <i class="material-icons">arrow_drop_down</i></a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
<li><a href="#">Product 4</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</nav>
<script type="text/javascript">
$("nav div").click(function (){
$("ul").slideToggle();
$("ul ul").css("display", "none");
});
$("ul li").click(function(){
$("ul ul").slideUp();
$(this).find('ul').slideToggle();
});
$(window).resize(function(){
if($(window).whidth() > 768) {
$("ul").removeAttr('style');
}
});
</script>
Después el Css
$("nav div").click(function (){
$("ul").slideToggle();
$("ul ul").css("display", "none");
});
$("ul li").click(function(){
$("ul ul").slideUp();
$(this).find('ul').slideToggle();
});
$(window).resize(function(){
if($(window).whidth() > 768) {
$("ul").removeAttr('style');
}
});
html {
font-family: 'Poppins', sans-serif;
}
body {
padding: 0;
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
background: #e3e3e3;
position: relative;
}
ul li {
display: inline-block;
}
ul li a {
color: #292929;
text-decoration: none;
padding: 15px;
display: block;
}
ul li:hover {
background: lightgrey;
}
ul ul {
position: absolute;
min-width: 200px;
background: lightgrey;
display: none;
}
ul ul li {
display: block;
background: #e3e3e3;
}
ul li:hover ul {
display: block;
}
ul li i {
color: #292929;
float: right;
padding-left: 5px;
}
nav div {
background: lightgrey;
color: #292929;
font-size: 24px;
padding: 0.6em;
cursor: pointer;
display: none;
}
@media(max-width: 768px) {
nav div {
display: block;
}
ul {
display: none;
position: static;
background: #e3e3e3;
}
ul li {
display: block;
}
ul ul {
position: static;
background: #e3e3e3;
}
}
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="estilosmenu.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<title>menuresponsive</title>
</head>
<body>
<nav>
<div>
<i class="material-icons">menu</i>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Drop 1 <i class="material-icons">arrow_drop_down</i></a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
<li><a href="#">Product 4</a></li>
</ul>
</li>
<li><a href="#">Drop 2 <i class="material-icons">arrow_drop_down</i></a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
<li><a href="#">Product 4</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</nav>
</body>
</html>
<html lang="es">
menuresponsive<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="estilosmenu.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<title>menuresponsive</title>
</head>
<body>
<nav>
<div>
<i class="material-icons">menu</i>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Drop 1 <i class="material-icons">arrow_drop_down</i></a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
<li><a href="#">Product 4</a></li>
</ul>
</li>
<li><a href="#">Drop 2 <i class="material-icons">arrow_drop_down</i></a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
<li><a href="#">Product 4</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</nav>
<script type="text/javascript">
$("nav div").click(function (){
$("ul").slideToggle();
$("ul ul").css("display", "none");
});
$("ul li").click(function(){
$("ul ul").slideUp();
$(this).find('ul').slideToggle();
});
$(window).resize(function(){
if($(window).whidth() > 768) {
$("ul").removeAttr('style');
}
});
</script>
</body>
</html>
html {
font-family: 'Poppins', sans-serif;
}
body { padding: 0; margin: 0; }
ul { margin: 0; padding: 0; list-style-type: none; background: #e3e3e3; position: relative; }
ul li { display: inline-block; }
ul li a { color: #292929; text-decoration: none; padding: 15px; display: block; }
ul li:hover { background: lightgrey; }
ul ul { position: absolute; min-width: 200px; background: lightgrey; display: none; }
ul ul li { display: block; background: #e3e3e3; }
ul li:hover ul { display: block; }
ul li i { color: #292929; float: right; padding-left: 5px; }
nav div { background: lightgrey; color: #292929; font-size: 24px; padding: 0.6em; cursor: pointer; display: none; }
@media(max-width: 768px) { nav div { display: block; }
}
body {
padding: 0;
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
background: #e3e3e3;
position: relative;
}
ul li {
display: inline-block;
}
ul li a {
color: #292929;
text-decoration: none;
padding: 15px;
display: block;
}
ul li:hover {
background: lightgrey;
}
ul ul {
position: absolute;
min-width: 200px;
background: lightgrey;
display: none;
}
ul ul li {
display: block;
background: #e3e3e3;
}
ul li:hover ul {
display: block;
}
ul li i {
color: #292929;
float: right;
padding-left: 5px;
}
nav div {
background: lightgrey;
color: #292929;
font-size: 24px;
padding: 0.6em;
cursor: pointer;
display: none;
}
@media(max-width: 768px) {
nav div {
display: block;
}
ul {
display: none;
position: static;
background: #e3e3e3;
}
ul li {
display: block;
}
ul ul {
position: static;
background: #e3e3e3;
}
}
}
<html lang="es">
menuresponsive<nav>
<div>
<i class="material-icons">menu</i>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Drop 1 <i class="material-icons">arrow_drop_down</i></a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
<li><a href="#">Product 4</a></li>
</ul>
</li>
<li><a href="#">Drop 2 <i class="material-icons">arrow_drop_down</i></a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
<li><a href="#">Product 4</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</nav>
<script type="text/javascript">
$("nav div").click(function (){
$("ul").slideToggle();
$("ul ul").css("display", "none");
});
$("ul li").click(function(){
$("ul ul").slideUp();
$(this).find('ul').slideToggle();
});
$(window).resize(function(){
if($(window).whidth() > 768) {
$("ul").removeAttr('style');
}
});
</script>
html {
font-family: 'Poppins', sans-serif;
}
body { padding: 0; margin: 0; }
ul { margin: 0; padding: 0; list-style-type: none; background: #e3e3e3; position: relative; }
ul li { display: inline-block; }
ul li a { color: #292929; text-decoration: none; padding: 15px; display: block; }
ul li:hover { background: lightgrey; }
ul ul { position: absolute; min-width: 200px; background: lightgrey; display: none; }
ul ul li { display: block; background: #e3e3e3; }
ul li:hover ul { display: block; }
ul li i { color: #292929; float: right; padding-left: 5px; }
nav div { background: lightgrey; color: #292929; font-size: 24px; padding: 0.6em; cursor: pointer; display: none; }
@media(max-width: 768px) { nav div { display: block; }
ul {
display: none;
position: static;
background: #e3e3e3;
}
ul li {
display: block;
}
ul ul {
position: static;
background: #e3e3e3;
}
}
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="estilosmenu.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<title>menuresponsive</title>
</head>
<body>
<nav>
<div>
<i class="material-icons">menu</i>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Drop 1 <i class="material-icons">arrow_drop_down</i></a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
<li><a href="#">Product 4</a></li>
</ul>
</li>
<li><a href="#">Drop 2 <i class="material-icons">arrow_drop_down</i></a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
<li><a href="#">Product 4</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</nav>
<script type="text/javascript">
$("nav div").click(function (){
$("ul").slideToggle();
$("ul ul").css("display", "none");
});
$("ul li").click(function(){
$("ul ul").slideUp();
$(this).find('ul').slideToggle();
});
$(window).resize(function(){
if($(window).whidth() > 768) {
$("ul").removeAttr('style');
}
});
</script>
</body>
</html>
html {
font-family: 'Poppins', sans-serif;
}
body {
padding: 0;
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
background: #e3e3e3;
position: relative;
}
ul li {
display: inline-block;
}
ul li a {
color: #292929;
text-decoration: none;
padding: 15px;
display: block;
}
ul li:hover {
background: lightgrey;
}
ul ul {
position: absolute;
min-width: 200px;
background: lightgrey;
display: none;
}
ul ul li {
display: block;
background: #e3e3e3;
}
ul li:hover ul {
display: block;
}
ul li i {
color: #292929;
float: right;
padding-left: 5px;
}
nav div {
background: lightgrey;
color: #292929;
font-size: 24px;
padding: 0.6em;
cursor: pointer;
display: none;
}
@media(max-width: 768px) {
nav div {
display: block;
}
ul {
display: none;
position: static;
background: #e3e3e3;
}
ul li {
display: block;
}
ul ul {
position: static;
background: #e3e3e3;
}
}