CODEWITHSUNDEEP
css
1tree
1tree

Reputation: 43

CSS- how to correctly implement dropdown menu go sideways?

I want dropdown effect to go sidways.

I am able to do that with display: inline-table effect. 1) is there a better way to do this??

though above works, it expands content on the right side of parent component( dropbtn in this case). You can refer to below code how this uglyfies layout. I want to make it span towards left side of parent button so that the button stays at its current position. 2) Is there a way to hack it?

Thanks in advance!

<!DOCTYPE html>
<html>

<head>
  <style>
    .dropbtn {
      background-color: #4CAF50;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
    }
    
    .btn {
      background-color: #37abc8ff;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
    }
    
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    .dropdown-content {
      display: none;
      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: inline-table;
    }
    
    .dropdown-content a:hover {
      background-color: #f1f1f1
    }
    
    .dropdown:hover .dropdown-content {
      display: inline-table;
    }
    
    .dropdown:hover .dropbtn {
      background-color: #3e8e41;
    }
    
    .wrapper {
      display: flex;
      justify-content: space-between;
    }
  </style>
</head>

<body>

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

  <div class="wrapper">
    <button class="btn">Hello</button>
    <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>

</body>

</html>

strong text

Upvotes: 0

Views: 38

Answers (1)

VXp
VXp

Reputation: 12078

The fastest and easiest way is to put the .dropdown-content div before .dropbtn button in your HTML structure:

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.btn {
  background-color: #37abc8ff;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

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

.dropdown-content {
  display: none;
  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: inline-table;
}

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

.dropdown:hover .dropdown-content {
  display: inline-table;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

.wrapper {
  display: flex;
  justify-content: space-between;
}
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

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

Upvotes: 1

Related Questions