topnav.css (1944B)
1 .topnav { 2 position: fixed; /* Set the navbar to fixed position */ 3 top: 0; /* Position the navbar at the top of the page */ 4 width: 100%; 5 height: 50px; /* Full width */ 6 background-color: var(--nav-bg); 7 } 8 .topnav ul { 9 list-style: none; 10 padding: 0; 11 margin: 0; 12 box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19); 13 z-index: 998; 14 } 15 16 .topnav ul li { 17 display: block; 18 position: relative; 19 float: left; 20 } 21 22 /* This hides the dropdowns */ 23 24 .topnav li ul { 25 display: none; 26 } 27 28 .topnav ul li a { 29 display: block; 30 padding: 0.8em; 31 text-decoration: none; 32 white-space: nowrap; 33 color: var(--accent); 34 overflow-y: auto; 35 } 36 37 .topnav ul li a:hover { 38 color: var(--accent2); 39 background: var(--accent); 40 } 41 42 /* Display the dropdown */ 43 44 .topnav li:hover > ul { 45 display: block; 46 position: absolute; 47 } 48 49 .topnav li:hover li { 50 float: none; 51 } 52 53 .topnav li:hover a { 54 color: black; 55 background: #f9f9f9; 56 } 57 58 .topnav li:hover li a:hover { 59 color: black; 60 background: #ddd; 61 } 62 63 .topnav li ul li { 64 border-top: 0; 65 } 66 67 /* Displays second level dropdowns to the right of the first level dropdown */ 68 69 .topnav ul ul ul { 70 left: 100%; 71 top: 0; 72 overflow-y: auto; 73 } 74 75 /* Simple clearfix */ 76 77 .topnav ul:before, 78 .topnav ul:after { 79 content: " "; /* 1 */ 80 display: table; /* 2 */ 81 } 82 83 .topnav ul:after { 84 clear: both; 85 } 86 .parent li { 87 margin: 0px -3px; 88 padding: 0px; 89 } 90 91 .parent ul { 92 max-height: 500px; 93 min-width: 460px; 94 overflow-y: auto; 95 overflow-x: hidden; 96 margin: 0px -3px; 97 padding: 0px; 98 box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19); 99 } 100 101 .scrollable li { 102 height: auto; 103 } 104 105 .navbartitle { 106 margin: 0 auto; 107 height: 50px; 108 left: 50%; 109 transform: translateX(-50%); 110 padding: 0.8em; 111 text-align: center; 112 text-shadow: 0 0 0 #faf7fc; 113 text-decoration: none; 114 color: #faf7fc; 115 font-size: 1rem; 116 line-height: 1.5; 117 position: fixed; 118 z-index: 999; 119 top: 0px; 120 }