Advertisement
Guest User

Untitled

a guest
Jun 18th, 2019
114
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.32 KB | None | 0 0
  1. <html>
  2. <head>
  3. <meta name="viewport" content="width=device-width, initial-scale=1">
  4. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  5. <style>
  6. body {
  7.   font-family: Arial, Helvetica, sans-serif;
  8.   margin: 0;
  9. }
  10.  
  11. .navbar {
  12.   overflow: hidden;
  13.   background-color: #333;
  14. }
  15.  
  16. .navbar a {
  17.   float: left;
  18.   font-size: 16px;
  19.   color: white;
  20.   text-align: center;
  21.   padding: 14px 16px;
  22.   text-decoration: none;
  23. }
  24.  
  25. .subnav {
  26.   float: left;
  27.   overflow: hidden;
  28. }
  29.  
  30. .subnav .subnavbtn {
  31.   font-size: 16px;  
  32.   border: none;
  33.   outline: none;
  34.   color: white;
  35.   padding: 14px 16px;
  36.   background-color: inherit;
  37.   font-family: inherit;
  38.   margin: 0;
  39. }
  40.  
  41. .navbar a:hover, .subnav:hover .subnavbtn {
  42.   background-color: red;
  43. }
  44.  
  45. .subnav-content {
  46.   display: none;
  47.   position: absolute;
  48.   left: 0;
  49.   background-color: red;
  50.   width: 100%;
  51.   z-index: 1;
  52. }
  53.  
  54. .subnav-content a {
  55.   float: left;
  56.   color: white;
  57.   text-decoration: none;
  58. }
  59.  
  60. .subnav-content a:hover {
  61.   background-color: #eee;
  62.   color: black;
  63. }
  64.  
  65. .subnav:hover .subnav-content {
  66.   display: block;
  67. }
  68. </style>
  69. </head>
  70. <body>
  71.  
  72. <div class="navbar">
  73.   <a href="#home">Home</a>
  74.   <div class="subnav">
  75.     <button class="subnavbtn">About <i class="fa fa-caret-down"></i></button>
  76.     <div class="subnav-content">
  77.       <a href="#company">Company</a>
  78.       <a href="#team">Team</a>
  79.       <a href="#careers">Careers</a>
  80.     </div>
  81.   </div>
  82.   <div class="subnav">
  83.     <button class="subnavbtn">Services <i class="fa fa-caret-down"></i></button>
  84.     <div class="subnav-content">
  85.       <a href="#bring">Bring</a>
  86.       <a href="#deliver">Deliver</a>
  87.       <a href="#package">Package</a>
  88.       <a href="#express">Express</a>
  89.     </div>
  90.   </div>
  91.   <div class="subnav">
  92.     <button class="subnavbtn">Partners <i class="fa fa-caret-down"></i></button>
  93.     <div class="subnav-content">
  94.       <a href="#link1">Link 1</a>
  95.       <a href="#link2">Link 2</a>
  96.       <a href="#link3">Link 3</a>
  97.       <a href="#link4">Link 4</a>
  98.     </div>
  99.   </div>
  100.   <a href="#contact">Contact</a>
  101. </div>
  102.  
  103. <div style="padding:0 16px">
  104.   <h3>Subnav/dropdown menu inside a Navigation Bar</h3>
  105.   <p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
  106. </div>
  107.  
  108. </body>
  109. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement