Question 170415 in Html Question posted in
Some basic documentation can be found here.

Why is my menu button activating across the screen? #HTML

I recently created a website with a dropdown menu on the left side. However, whenever I’m at the top of the screen, where the dropdown would be on the left, the dropdown activates even when I’m on the other side of the screen. I was expecting it to only activate when I hover over the button itself.

   .dropbtn {
  background-color: rgb(191, 255, 181);
  padding: 0px;
  font-size: 45px;
  border: none;
  width: 100px;
  height: 100px;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #98CC90;
  min-width: 16px;
  border-radius: 5px;
  z-index: 0;
}

.dropdown {
text-align: left;
}

.dropdown-content a {
  color: #182016;
  padding: 12px 12px;
  text-decoration: none;
  font-size: 35px;
   font-family: Arial, sans-serif;
  display: block;
}

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

.dropdown-content a:hover {border-radius: 5px;}

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

.dropdown:hover .dropbtn {background-color: rgb(191, 255, 181);}
<div class="dropdown">
  <button class="dropbtn"><div class="menu"><img src="https://www.freeiconspng.com/thumbs/menu-icon/menu-icon-6.png"/></div></button>
  
  <div class="dropdown-content">
    <a onclick="window.location.href='https://ieatlargefrogs.com/about-me.html';">About me</a>
    <a onclick="window.location.href='https://ieatlargefrogs.com/dnilist.html';">DNI List</a>
    <a onclick="window.location.href='https://ieatlargefrogs.com/website.html';">Website Stuff</a>
  </div>
</div>`
Tags:

2

Answers


  1. 0 
    .dropbtn {
  background-color: rgb(191, 255, 181);
  padding: 0px;
  font-size: 45px;
  border: none;
  width: 100px;
  height: 100px;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #98CC90;
  min-width: 16px;
  border-radius: 5px;
  z-index: 0;
}

.dropdown {
text-align: left;
}

.dropdown-content a {
  color: #182016;
  padding: 12px 12px;
  text-decoration: none;
  font-size: 35px;
   font-family: Arial, sans-serif;
  display: inline-block;
}

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

.dropdown-content a:hover {border-radius: 5px;}

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

.dropdown:hover .dropbtn {background-color: rgb(191, 255, 181);}

    try setting the display of the a tags to inline block. The problem is that block display will stretch over the entire width of the container on default.

    alternatively you can set a width to the dropdown-content

    Login or Signup to reply.
  2. 0

    As you have mentioned in the question, you want the dropdown-content to be displayed only when the button is hovered. But for hovering the dropdown-content, it has to remain displayed even when dropdown-content is hovered.
    So I have modified your code.

    .dropbtn {
  background-color: rgb(191, 255, 181);
  padding: 0px;
  font-size: 45px;
  border: none;
  width: 100px;
  height: 100px;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #98CC90;
  min-width: 16px;
  border-radius: 5px;
  z-index: 0;
}

.dropdown {
text-align: left;
}

.dropdown-content a {
  color: #182016;
  padding: 12px 12px;
  text-decoration: none;
  font-size: 35px;
   font-family: Arial, sans-serif;
  display: block;
}

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

.dropdown-content a:hover {border-radius: 5px;}

.dropbtn:hover + .dropdown-content, .dropdown-content:hover {display: block;}

.dropdown:hover .dropbtn {background-color: rgb(191, 255, 181);}
    <div class="dropdown">
  <button class="dropbtn"><div class="menu"><img src="https://www.freeiconspng.com/thumbs/menu-icon/menu-icon-6.png"/></div></button>
  
  <div class="dropdown-content">
    <a onclick="window.location.href='https://ieatlargefrogs.com/about-me.html';">About me</a>
    <a onclick="window.location.href='https://ieatlargefrogs.com/dnilist.html';">DNI List</a>
    <a onclick="window.location.href='https://ieatlargefrogs.com/website.html';">Website Stuff</a>
  </div>
</div>`

    Please ensure that there is always positional continuity between dropbtn and dropdown-content. Otherwise, it will not be possible to hover the dropdown-content.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search