menu responsive dropdown

src/components/MainHeader.astro

@@ -1,16 +1,33 @@
+<div class="hidden md:block">
+  <div class="navbar ">
+    <a href="#home">Home</a>
+    <a href="#news">News</a>
+    <div class="dropdownDesktop">
+      <button class="dropbtnDesktop">Dropdown 
+        <i class="fa fa-caret-downDesktop"></i>
+      </button>
+      <div class="dropdown-contentDesktop">
+        <a href="#">Link 1</a>
+        <a href="#">Link 2</a>
+        <a href="#">Link 3</a>
+      </div>
+    </div> 
+  </div>
+</div>  
 
-<div class="topnav">
+<div class="mobileTopMenu block md:hidden">
+  <div class="topnavMobile">
     <a href="#home" class="active">Logo</a>
     <div id="mobileMenu" class="hidden">
       <a href="#news">News</a>
       <a href="#contact">Contact</a>
       <div class="dropdown">
         <button class="dropbtn">Dropdown 
-        <i class="fa fa-caret-down"></i>
+          &#8964
         </button>
         <div class="dropdown-content">
           <a href="#">Link 1</a>
-        <a href="#">Link 2</a>
+          <a href="#">Link 2Link 2Link 2</a>
           <a href="#">Link 3</a>
         </div>
       </div> 
@@ -25,6 +42,8 @@
       &#9776;
     </a>
   </div>
+</div>
+
 
 <script is:inline>
   function openMobileMenu() {
@@ -34,7 +53,79 @@
 
 </script>
 <style>
+  .navbar {
+  overflow: hidden;
+  background-color: #333;
+  /* position: absolute;
+  width: 100%;
+  left: 0;
+  top: 0; */
+}
 
+.navbar a {
+  float: left;
+  font-size: 16px;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+.dropdownDesktop {
+  float: left;
+  overflow: hidden;
+}
+
+.dropdownDesktop .dropbtnDesktop {
+  font-size: 16px;  
+  border: none;
+  outline: none;
+  color: white;
+  padding: 14px 16px;
+  background-color: inherit;
+  font-family: inherit;
+  margin: 0;
+}
+
+.navbar a:hover, .dropdownDesktop:hover .dropbtnDesktop {
+  background-color: red;
+}
+
+.dropdown-contentDesktop {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+.dropdown-contentDesktop a {
+  float: none;
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+  text-align: left;
+}
+
+.dropdown-contentDesktop a:hover {
+  background-color: #ddd;
+}
+
+.dropdownDesktop:hover .dropdown-contentDesktop {
+  display: block;
+}
+
+
+
+
+ /* .mobileTopMenu{
+  position: absolute;
+  top:0;
+  left:0;
+  width:100%;
+ } */
 .dropdown:hover .dropdown-content {
   display: block;
   background-color: #ddd;
@@ -45,7 +136,6 @@
 .dropdown-content {
   display: none;
   position: absolute;
-
   z-index: 1;
 }
 
@@ -60,14 +150,14 @@
 
 
 
-.topnav {
+.topnavMobile {
   overflow: hidden;
   background-color: #333;
   position: relative;
 }
 
 
-.topnav a {
+.topnavMobile a, .topnavMobile >div > div {
   color: white;
   padding: 14px 16px;
   text-decoration: none;
@@ -75,7 +165,7 @@
   display: block;
 }
 
-.topnav a.icon {
+.topnavMobile a.icon {
   background: black;
   display: block;
   position: absolute;
@@ -83,13 +173,13 @@
   top: 0;
 }
 
-.topnav a:hover {
+.topnavMobile a:hover {
   background-color: #ddd;
   color: black;
 }
 
 .active {
-  background-color: #04AA6D;
+  background-color: #aa6204;
   color: white;
 }