Trouble understanding some code from w3schools.com

HTML-CSS
1

There is some code I am looking at. It contains some text and then two green buttons floating extreme left and extreme right below the text. Whenever user hovers over either the left or right aligned buttons, 3 links against a grey background become shown and I am trying to understand one thing about the code. The code is below.

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

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

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

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

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

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>Aligned Dropdown Content</h2>
<p>Determine whether the dropdown content should go from left to right or right to left with the left and right properties.</p>

<div class="dropdown" style="float:left;">
  <button class="dropbtn">Left</button>
  <div class="dropdown-content" style="left:0;">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  </div>
</div>

<div class="dropdown" style="float:right;">
  <button class="dropbtn">Right</button>
  <div class="dropdown-content">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>

My question is what exactly triggers the left and right buttons to display lists of 3 links over gray background to appear below the buttons? It seems that just an selector for the button with display: none; and display: block; when the buttons are hovered over should be used when user hovers over the left or right buttons to display the links below. But I don’t understand with the way the code is written what triggers the list to appear when the user hovers the mouse of the floated left and right buttons.

Thanks for any help.

2

Since this isn’t using JS, only CSS, and the list is being displayed on hover, then you are dealing with the :hover pseudo-class. There are only two rules that include :hover and one of them is just for changing the background color on the button, so the other one must be controlling the display of the list.

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

The list (with class dropdown-content) is nested in the the div with class dropdown. So when you hover over the div then this rule causes the list to show itself.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.