I have a dropdown menu with 3 dropdowns. For some reasons, the button goes below the Legend Layers. How can I move the button to the top left side? I have included the <body> tag below:
<body class="claro" >
<div id="content" data-dojo-type="dijit/layout/BorderContainer"
ย ย ย ย data-dojo-props="design:'headline', gutters:true"
ย ย ย ย style="width: 100%; height: 100%; margin: 0;">
ย ย ย <div id="rightPane"
ย ย ย ย ย ย ย ย data-dojo-type="dijit/layout/ContentPane"
ย ย ย ย ย ย ย ย data-dojo-props="region:'right'">
ย ย ย ย ย ย ย <div data-dojo-type="dijit/layout/AccordionContainer">
ย ย ย ย ย ย ย ย ย ย ย <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย data-dojo-props="title:'Legend', selected:true">
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย <div id="legendDiv"></div>
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย <div class="dropdown">
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย <button onclick="myFunction()" class="dropbtn">Editor</button>
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย <div id="myDropdown" class="dropdown-content">
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย <a href="edit_disabled.html" target="iframe_main">Disabled</a>
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย <a href="#">Attributed Only</a>
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย <a href="#">Full Editing</a>
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย </div>
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย </div>
ย ย ย ย ย ย ย ย ย ย ย </div>
ย ย ย ย ย ย ย </div>
ย ย ย </div>
ย ย ย
ย ย ย <div id="map"
ย ย ย ย ย ย ย ย data-dojo-type="dijit/layout/ContentPane"
ย ย ย ย ย ย ย ย data-dojo-props="region:'center'"
ย ย ย ย ย ย ย ย style="overflow:hidden;">
ย ย ย </div>
</div>
CSS for the dropdown button
.dropbtn {
ย ย ย background-color: #4CAF50;
ย ย ย color: white;
ย ย ย padding: 16px;
ย ย ย font-size: 16px;
ย ย ย border: none;
ย ย ย cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
ย ย ย background-color: #3e8e41;
}
.dropdown {
ย ย ย position: relative;
ย ย ย display: inline-block;
}
.dropdown-content {
ย ย ย display: none;
ย ย ย position: absolute;
ย ย ย background-color: #f9f9f9;
ย ย ย min-width: 360px;
ย ย ย overflow: auto;
ย ย ย box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
ย ย ย color: black;
ย ย ย padding: 12px 16px;
ย ย ย text-decoration: none;
ย ย ย display: block;
}
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}
