JSFiddle - React, Tailwind, and code Playground

Dropdown

by pmamode

HTML

<div ng-app='myApp' ng-controller="myCtrl">
  Every good boy does find.
  <div class="dropdown">
    <div class="dropbtn">Dropdown</div>
    <ul class="dropdown-content">
      <li ng-repeat="x in records">{{x}}</li>
    </ul>
  </div>
  Jack and Jill went up a hill.

  <br>
  <br>


  <div>
    Every good boy does find.
    <div class="dropdown2">
      <div class="dropbtn2">Button</div>
      <div>xxxxxxxxxxx</div>
      <div>yyyyyyyyyyy</div>
      <div>zzzzzzzzzzz</div>
    </div>
    Jack and Jill went up a hill to fetch a pail of water. Jack fell down and broke his crown and Jill came tumbling after.
  </div>

CSS

.dropdown {
        position: relative;
        display: inline-block;
      }
      
      .dropbtn {
        background-color: grey;
        color: white;
        padding: 0px;
        border: none;
        cursor: pointer;
      }
      
      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      }
      
      .dropdown-content ul {
        color: black;
        padding: 6px 6px;
        text-decoration: none;
        display: block;
      }
      
      .dropdown-content li:hover {
        background-color: yellow;
      }
      
      .dropdown:hover .dropdown-content {
        display: block;
      }
      
      .dropdown:hover .dropbtn {
        background-color: green;
      }
      /* ***************************************************** */
      
      .dropdown2 {
        display: inline-block;
        background-color: yellow;
      }
      
      .dropdown2 .dropbtn2 {
        display: inline;
        background-color: grey;
        color: white;
        padding: 0px;
        border: none;
        cursor: pointer;
      }
      
      .dropdown-content2 {
        display: block;
        background-color: #f9f9f9;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      }
      
      .dropdown-content2 li:hover {
        background-color: yellow;
      }

JavaScript

var app = angular.module('myApp', []);

app.controller("myCtrl", function($scope) {
  $scope.records = [
    "Alfreds Futterkiste",
    "Berglunds snabbköp",
    "Centro comercial Moctezuma",
    "Ernst Handel",
  ]
});