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">{{buttonTitle}}</div>
    <ul class="dropdown-content">
      <li ng-repeat="x in records">{{x}}</li>
    </ul>
  </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);
        width: auto;
        white-space: nowrap;
        color: black;
        padding: 6px 6px;
      }
      
      .dropdown-content li:hover {
        background-color: yellow;
      }
      
      .dropdown:hover .dropdown-content {
        display: block;
      }
      
      .dropdown:hover .dropbtn {
        background-color: black;
      }

JavaScript

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

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