Advertisement
Guest User

API

a guest
Nov 22nd, 2018
134
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.15 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: #4CAF50;
  8. color: white;
  9. padding: 16px;
  10. font-size: 16px;
  11. border: none;
  12. }
  13.  
  14. .dropdown {
  15. position: relative;
  16. display: inline-block;
  17. }
  18.  
  19. .dropdown-content {
  20. display: none;
  21. position: absolute;
  22. background-color: #f1f1f1;
  23. min-width: 160px;
  24. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  25. z-index: 1;
  26. }
  27.  
  28. .dropdown-content a {
  29. color: black;
  30. padding: 12px 16px;
  31. text-decoration: none;
  32. display: block;
  33. }
  34.  
  35. .dropdown-content a:hover {background-color: #ddd;}
  36.  
  37. .dropdown:hover .dropdown-content {display: block;}
  38.  
  39. .dropdown:hover .dropbtn {background-color: #3e8e41;}
  40. </style>
  41. </head>
  42. <body>
  43.  
  44. <h2>Hoverable Dropdown</h2>
  45. <p>Move the mouse over the button to open the dropdown menu.</p>
  46.  
  47. <div class="dropdown">
  48. <button class="dropbtn">Dropdown</button>
  49. <div class="dropdown-content">
  50. <a href="www.wikipedia.com">Link 1</a>
  51. <a href="www.uloz.to">Link 2</a>
  52. <a href="www.youtube.com">Link 3</a>
  53. </div>
  54. </div>
  55.  
  56. </body>
  57. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement