Skip to content Skip to sidebar Skip to footer
Home / Css / Html

How Could I Prevent The Div From Blocking The Dropdown?

Post a Comment
There's this dropdown from W3Schools that seems to work after my editsLinks: 1 Unfortunately, another
element blocks it and the .dropdown:hover doesn't work.2 This happ

Solution 1:

Remove the z-index = -1 in #infoContainer and it shall work.

#infoContainer {
      position: absolute;
      top: 10px;
      left: 76%;
      width: 23%;
      border: 1px solid dodgerblue;
      /* z-index: -1; *//* REMOVE *//* [Result] text in the top-right corner blocks the menu,
         Also for the demonstartion */margin-top: 10%;
    }


functionmenu(text) {
  // respondconsole.log(`Click success: ${text}`)
}

// 4 seconds to hover over the menu iconsetTimeout(function() {
  document.getElementById("storyDiv").style.marginTop = "10%"
}, 4000)
#gameMenu {
  color: red;
}

#storyDiv {
  position: relative;
  display: inline-block;
  width: 75%;
  height: 75%;
  margin: 0;
  overflow-y: auto; /* Makes it scrollable if the text is too big */border: 1px solid blue;
  z-index: -2;
  pointer-events: none;
}

#story {
  margin: 0;
  position: relative;
  z-index: -2;
  pointer-events: none;
  border: 1px solid orange;
}


/* Edited dropdown from https://www.w3schools.com/howto/howto_css_dropdown.asp */.dropdown {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-block;
  z-index: 1;
}

.dropdownContent {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 160px;
  z-index: 1;
}

.dropdownContentbutton {
  padding: 12px16px;
  font-size: 16px;
  border: none;
  display: block;
}

.dropdown:hover.dropdownContent {
  display: block;
}


/* End of dropdown */#infoContainer {
  position: absolute;
  top: 10px;
  left: 76%;
  width: 23%;
  border: 1px solid dodgerblue;
  /* z-index: -1; *//* REMOVE *//* [Result] text in the top-right corner blocks the menu,
     Also for the demonstartion */margin-top: 10%;
}

#playerInfo {
  margin-top: 0;
}
<head><!-- Menu symbol --><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons"></head><body><divid='storyDiv'><pid='story'>
      With i (color), em, ul, and li tags. As well as <br>br, and enough to expand the bottom-border enough so that it's visually below the menu icon, blocking it.<br></p></div><divid='infoContainer'><divclass='dropdown'><spanclass="material-icons"id='gameMenu'>menu</span><divclass='dropdownContent'><buttononClick='menu("Instructions")'> Instructions </button><buttononClick='menu("Settings")'> Settings </button><buttononClick='menu("Credits")'> Credits </button></div></div><divid="playerInfo"><p>Another div with other stuff in it.</p></div></div></body>

You may like these posts

Post a Comment for "How Could I Prevent The Div From Blocking The Dropdown?"