Advertisement
Guest User

Untitled

a guest
Oct 16th, 2019
98
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.42 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6. .dropbtn {
  7. background-color: gray;
  8. color: white;
  9. padding: 16px;
  10. font-size: 16px;
  11. border radius: 30%;
  12. border-radius:20px 20px 20px 20px;
  13. }
  14.  
  15. .dropdown {
  16. position: apsolute;
  17. display: inline-block;
  18.  
  19. }
  20.  
  21. .dropdown-content {
  22. display: none;
  23. position: absolute;
  24. background-color: gray;
  25. min-width: 160px;
  26. box-shadow:gray;
  27. z-index: 1;
  28. }
  29.  
  30. .dropdown-content a {
  31. color: black;
  32. padding: 12px 16px;
  33. text-decoration: none;
  34. display: block;
  35. }
  36.  
  37. .dropdown-content a:hover {background-color: #gray;}
  38.  
  39. .dropdown:hover .dropdown-content {display: block;}
  40.  
  41. .dropdown:hover .dropbtn {background-color: #gray;}
  42. </style>
  43. </head>
  44. <body>
  45.  
  46.  
  47.  
  48. <div class="dropdown">
  49. <button class="dropbtn">Dropdown</button>
  50. <div class="dropdown-content">
  51. <a href="#">Dropdown</a>
  52. <a href="#">Dropdown</a>
  53. <a href="#">Dropdown</a>
  54. </div>
  55. </div>
  56. <div class="dropdown">
  57. <button class="dropbtn">Dropdown</button>
  58. <div class="dropdown-content">
  59. <a href="#">Dropdown</a>
  60. <a href="#">Dropdown</a>
  61. <a href="#">Dropdown</a>
  62. </div>
  63. </div>
  64. <div class="dropdown">
  65. <button class="dropbtn">Dropdown</button>
  66. <div class="dropdown-content">
  67. <a href="#">Dropdown</a>
  68. <a href="#">Dropdown</a>
  69. <a href="#">Dropdown</a>
  70. </div>
  71. </div>
  72. </body>
  73. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement