CODEWITHSUNDEEP
htmlcssdrop-down-menu
Sam
Sam

Reputation: 2331

CSS nested dropdown menu that opens to the right

I modified the example from W3 schools a little bit to include a nested DropDown menu. I cannot figure out how to edit the css so that the drop down menus always appear to the right of the button being hovered over.

Ideally I want to drop down to look like this when hovering over Main button, and then Sub button2

[Main button] - [Sub button1]
                [Sub button2] - [Sub button2 item1]
                [Sub button3] - [Sub button2 item2]
                              - [Sub button2 item3]                    


.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;
  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;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
	<div class="dropdown">
	  <button class="dropbtn">Dropdown</button>
  		<div class="dropdown-content">

			<a href="#">Link 1</a>
  			<a href="#">Link 2</a>
  			<a href="#">Link 3</a>
        </div>
	</div>
    <div class="dropdown">
	  <button class="dropbtn">Dropdown</button>
  		<div class="dropdown-content">

			<a href="#">Link 1</a>
  			<a href="#">Link 2</a>
  			<a href="#">Link 3</a>
        </div>
	</div>
  </div>
</div>

<p><strong>Note:</strong> We use href="#" for test links. In a real web site this would be URLs.</p>

</body>
</html>

Upvotes: 2

Views: 1493

Answers (1)

Nidhin Joseph
Nidhin Joseph

Reputation: 10237

Just add left: 100%; top: 0; to your .dropdown-content. This will set to the defined position of the absolute element.

.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;
  left: 100%;
  top: 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;
}
<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <div class="dropdown">
      <button class="dropbtn">Dropdown</button>
      <div class="dropdown-content">

        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
    <div class="dropdown">
      <button class="dropbtn">Dropdown</button>
      <div class="dropdown-content">

        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </div>
</div>

<p><strong>Note:</strong> We use href="#" for test links. In a real web site this would be URLs.</p>

Upvotes: 2

Related Questions