how to make drop-down 100% width that contains another drop-down in react js?

user_12856814 0
Viewed 206

need this dropdown

need this type of dropdown with another dropdown inside the same dropdown i tried normal dropdown method with navbar in bootstrap but i cannot achieve it.

my code is :

<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>

my style is :

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

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.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;
}

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

.dropdown:hover .dropdown-content {
  display: block;
}
reactjs user-interface css html
1 Answers

Here is modified version of your code that supports nested dropdown. Based on screenshot that you provided you want it to work on click and not on hover, for that you can just replace the css :hover and use React hooks to trigger open and close, cheers.

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

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
 width: 100%;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
 width: 100%;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

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

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

.dropbtn_inside {
 color: black;
 cursor: pointer;
 background-color: #ffa;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content-inside {
 display: none;
}

.dropbtn_inside:hover > .dropdown-content-inside  {
 display: block;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <div class="dropbtn_inside">
   Link 3
   <div class="dropdown-content-inside">
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
   </div>
  </div>
  </div>
</div>

user_111352970
Related