Advertisement
trentjs

CSS Dropdown Flyout

Dec 23rd, 2021
1,625
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.16 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.  
  7.     body{
  8.         font-family: Arial, Helvetica, sans-serif;
  9.     }
  10. .dropbtn {
  11.   background-color: #cccccc;
  12.   color: white;
  13.   padding: 8px;
  14.   font-size: 11px;
  15.   border: none;
  16. }
  17.  
  18. .dropdown {
  19.   position: relative;
  20.   display: inline-block;
  21. }
  22.  
  23. .dropdown-content {
  24.   display: none;
  25.   position: absolute;
  26.   background-color: #f1f1f1;
  27.   min-width: 160px;
  28.   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  29.   z-index: 1;
  30.   list-style-type: none;
  31.   padding: 0;
  32.   margin: 0;
  33. }
  34.  
  35. .dropdown-content li {
  36.   color: black;
  37.   padding:0.3em;
  38.   text-decoration: none;
  39.   display: block;
  40.   cursor: pointer;
  41. }
  42.  
  43. .dropdown-content li:hover {background-color: #ddd;}
  44.  
  45. .dropdown:hover .dropdown-content {display: block;}
  46.  
  47. .dropdown:hover .dropbtn {background-color: #3e8e41;}
  48. </style>
  49. </head>
  50. <body>
  51. <!-- https://www.w3schools.com/howto/howto_css_dropdown.asp -->
  52.  
  53. <div class="dropdown">
  54.   <button class="dropbtn">V</button>
  55.   <ul class="dropdown-content">
  56.     <li>Link 1</li>
  57.     <li>Link 2</li>
  58.     <li>Link 3</li>
  59.   </ul>
  60. </div>
  61.  
  62. </body>
  63. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement