I was creating a menu example dropdown with purecss , started right, the submenus appeared all right, when I went to do the same example only in the format responsive (where I used this example [ link of the site itself) . But drowpdown does not show the submenus of customer liens, products, or sales of my desktop-sized project , they only appear when the screen is resized at mobile size, but dekstop does not appear.
Any solution?
Project - Obs: Running the project it will be displayed in mobile format, but in dekstop does not appear submenus.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A set of horizontal menus that switch to vertical
and which hide at small window widths.">
<title>Responsive Horizontal-to-Vertical Menu – Layout Examples – Pure</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-UQiGfs9ICog+LwheBSRCt1o5cbyKIHbwjWscjemyBMT9YCUMZffs6UqUTd0hObXD" crossorigin="anonymous">
<!--[if lt IE 9]>
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script><![endif]--><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*newDate();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create','UA-41480445-1','purecss.io');ga('send','pageview');</script></head><body><!--[iflteIE8]><linkrel="stylesheet" href="https://unpkg.com/[email protected]/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/grids-responsive-min.css">
<!--<![endif]-->
<style>
.custom-wrapper {
background-color: #CCCCCC;
margin-bottom: 1em;
-webkit-font-smoothing: antialiased;
height: 2.1em;
overflow: hidden;
-webkit-transition: height 0.5s;
-moz-transition: height 0.5s;
-ms-transition: height 0.5s;
transition: height 0.5s;
}
.custom-wrapper.open {
height: 14em;
}
.custom-menu-3 {
text-align: right;
}
.custom-toggle {
width: 34px;
height: 34px;
display: block;
position: absolute;
top: 0;
right: 0;
display: none;
}
.custom-toggle .bar {
background-color: #777;
display: block;
width: 20px;
height: 2px;
border-radius: 100px;
position: absolute;
top: 18px;
right: 7px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
.custom-toggle .bar:first-child {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
transform: translateY(-6px);
}
.custom-toggle.x .bar {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.custom-toggle.x .bar:first-child {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@media (max-width: 47.999em) {
.custom-menu-3 {
text-align: left;
}
.custom-toggle {
display: block;
}
}
</style>
<div class="custom-wrapper pure-g" id="menu">
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu">
<a href="#" class="pure-menu-heading custom-brand">Home</a>
<a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected pure-menu-has-children pure-menu-allow-hover">
<a href="#" id="menuLink1" class="pure-menu-link">Clientes</a>
<ul class="pure-menu-children">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Listar</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Cadastrar</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Pesquisar</a></li>
</ul>
</li>
<li class="pure-menu-item pure-menu-selected pure-menu-has-children pure-menu-allow-hover">
<a href="#" id="menuLink1" class="pure-menu-link">Produtos</a>
<ul class="pure-menu-children">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Listar</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Cadastrar</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Pesquisar</a></li>
</ul>
</li>
<li class="pure-menu-item pure-menu-selected pure-menu-has-children pure-menu-allow-hover">
<a href="#" id="menuLink1" class="pure-menu-link">Vendas</a>
<ul class="pure-menu-children">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Realizar Venda </a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Listar</a></li>
</ul>
</li>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Sair</a></li>
</ul>
</div>
</div>
</div>
<script>
(function (window, document) {
var menu = document.getElementById('menu'),
WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';
function toggleHorizontal() {
[].forEach.call(
document.getElementById('menu').querySelectorAll('.custom-can-transform'),
function(el){
el.classList.toggle('pure-menu-horizontal');
}
);
};
function toggleMenu() {
// set timeout so that the panel has a chance to roll up
// before the menu switches states
if (menu.classList.contains('open')) {
setTimeout(toggleHorizontal, 500);
}
else {
toggleHorizontal();
}
menu.classList.toggle('open');
document.getElementById('toggle').classList.toggle('x');
};
function closeMenu() {
if (menu.classList.contains('open')) {
toggleMenu();
}
}
document.getElementById('toggle').addEventListener('click', function (e) {
toggleMenu();
e.preventDefault();
});
window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
})(this, this.document);
</script>
<style>
.main {
padding: 2em;
color: black;
}
</style>
</div>
</body>
</html>