nav

74
0
06-10-2022 08:09 AM
MiguelMontero
New Contributor II

Dear greetings, I'm trying to make a cascading menu browser, it works for me when I design it in the w3schools viewer, but when I try to use it in the arcGIS hub the dropdown doesn't work. I leave the code to see if they have any solution.

 

HTML:

<div class="navbar">
<img class="logo" src="https://mepyd.maps.arcgis.com/sharing/rest/content/items/a52fa02c68cc44cfaae43ea13a0aab7e/data" alt="">
<div class="header-right">
<a href="#home">Inicio</a>
<div class="dropdown">
<button class="dropbtn">Conoce tus riesgos
</button>
<div class="dropdown-content">
<a href="#">Explorador de riesgo</a>
<a href="#">Perfiles territoriales</a>
</div>
</div>
<a href="#indicadores">Indicadores</a>
<a href="#sired">SIRED-RD</a>
<a href="#datos">Datos abiertos</a>
<div class="dropdown">
<button class="dropbtn">Documentación
</button>
<div class="dropdown-content">
<a href="#">Metodologias</a>
<a href="#">Marco legal</a>
</div>
</div>
</div>
</div>

CSS:

body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

.navbar {
overflow: hidden;
background-color: white;
padding: 20px 150px 10px 150px;

}

.navbar a {
float: left;
font-size: 16px;
color: #0e4184;
text-align: center;
padding: 14px 16px;
text-decoration: none;
line-height: 25px;
border-radius: 4px;

}

.logo {
width:250px

}

.header-right {
float: right;
}


.dropdown {
float: left;
overflow: hidden;
position:relative
}

.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: #0e4184;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
border-radius: 4px;
line-height: 25px;

}

.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #0e4184;
color: white;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {
background-color: #ddd;
}

.dropdown:hover .dropdown-content {
display: block;
}

Tags (2)
0 Kudos
0 Replies