From 8d83f0dc788076e7b716f3cc562b133a8aff8fb1 Mon Sep 17 00:00:00 2001
From: Furoooo <rikygerma@gmail.com>
Date: Sat, 10 Feb 2024 13:08:30 +0100
Subject: [PATCH] Palle XVI menu a tendina

---
 index.html | 19 ++++++++++++-------
 style.css  | 42 +++++++++++++++++++++++++++++-------------
 2 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index f671f38..79bb1c0 100644
--- a/index.html
+++ b/index.html
@@ -47,13 +47,14 @@
                                 <a href="pagine/biomi.html"> 
                                     Biomi» 
                                 </a>
-                                <div class="menubiomi">
-                                    <ul>
-                                        <li>Foreste</li>
-                                        <li>Oceani</li>
-                                        <li>Montagna</li>
-                                    </ul>
-                                </div>
+                                <ul class="menubiomi">
+                                    <li class="animate">Foreste</li>
+                                    <li class="animate">Montagne</li>
+                                    <li class="animate">Pianure</li>
+                                    <li class="animate">Paludi</li>
+                                    <li class="animate">Deserti</li>
+                                    <li class="animate">Oceani</li>
+                                </ul>
                             </li>
                             
                             <li class="Global__header__menu__item">
@@ -287,6 +288,10 @@ <h3 >
                     console.log("ciao")
                 });
                 
+                $("#Biomi").hover(function() {
+                    $(".menubiomi").toggleClass("menubiomi--open");
+                    console.log("ciao")
+                });
                 
                 $(window).scroll(function() {
                     
diff --git a/style.css b/style.css
index 14728bf..378befb 100644
--- a/style.css
+++ b/style.css
@@ -150,7 +150,6 @@ main{z-index: 0;}
 }
     /* Global Header Menu */
     .Global__header__menu{
-        
         width: 44%;
         list-style: none;
     }
@@ -305,11 +304,6 @@ main{z-index: 0;}
     position: fixed;
 }
 
-
-.menubiomi{
-    display: none;
-}
-
 /* Bottoni Azione */
 .cta{
     /* border: 1px solid red; */
@@ -494,18 +488,40 @@ main{z-index: 0;}
         text-align: center;
     }
 
-#Biomi:hover .menubiomi{
+.menubiomi{
+    display: none;
+}
+.menubiomi--open{
     /* margin: 50px 0px 0px 0px; */
+    display: grid;
+    transition: 0.3s;
+    transition-timing-function: ease;
     position: fixed;
     border: 1px solid black;
-    display: block;
-    width: 100px;
+    max-width: 1350px;
     background:#00841f;
-    padding: 0;
+    padding: 0; 
+    
 }
-.menubiomi ul{
+.menubiomi li{
     padding: 0;
-    border: 1px solid red;
+    /* border: 1px solid red; */
+    
+}
+.menubiomi li{
+    font-family: 'MinecraftRegular';
+    color: rgb(209, 209, 209);
+    padding: 5px 10px;
+    font-size: 24px;
+    border-bottom: 1px solid black;
+    display: flex;
+    flex-wrap: wrap;
+    
+}
+.menubiomi li:hover{
+    color: #000;
+    background:rgba(36,255,255,1);
+    
 }
 
 
@@ -639,7 +655,7 @@ Smartphone
             background-color: #000000;
             /* background: #005508; */
         }
-        /* Global HEader Icon Bar */
+        /* Global Header Icon Bar */
         .Global__header__icon-bar{
             display: block;
             width: 30px;