Aggiornato il menù e aggiunto il font FontAwesome

Materials/menu.php

@@ -1,11 +1,31 @@
-<div class="topnav">
-  <a <?php if(strpos($_SERVER['PHP_SELF'], 'Materials') !== false) echo 'class="active"'?> href="../index.php">Home</a>
-  <a <?php if(strpos($_SERVER['PHP_SELF'], 'Storico') !== false) echo 'class="active"'?> href="../StoricoStage/index.php">Storico Stage</a>
-  <a <?php if(strpos($_SERVER['PHP_SELF'], 'inserimentoStage') !== false) echo 'class="active"'?> href="../inserimentoStage/index.php">Organizza Stage</a>
-  <a <?php if(strpos($_SERVER['PHP_SELF'], 'inserimentoStudenti') !== false) echo 'class="active"'?> href="../inserimenti/inserimentoStudenti.html">Inserisci Studenti</a>
-  <a <?php if(strpos($_SERVER['PHP_SELF'], 'inserimentoAziende') !== false) echo 'class="active"'?> href="../inserimenti/inserimentoAziende.html">Inserisci Aziende</a>
-  <a <?php if(strpos($_SERVER['PHP_SELF'], 'inserimentoTutorScolastici') !== false) echo 'class="active"'?> href="../inserimenti/inserimentoTutorScolastici.html">Inserisci Tutor Scolastici</a>
-  <a <?php if(strpos($_SERVER['PHP_SELF'], 'visualizzaTutorS') !== false) echo 'class="active"'?> href="../visualizza/visualizzaTutorS.php">Visualizza i tutor scolastici</a>
-  <a <?php if(strpos($_SERVER['PHP_SELF'], 'visualizzaStudenti') !== false) echo 'class="active"'?> href="../visualizza/visualizzaStudenti.php">Visualizza gli studenti</a>
-  <a <?php if(strpos($_SERVER['PHP_SELF'], 'visualizzaAziende') !== false) echo 'class="active"'?> href="../visualizza/visualizzaAziende.php">Visualizza le aziende</a>
-</div> 
+<ul>
+  <li><a <?php //if(strpos($_SERVER['PHP_SELF'], 'Materials') !== false) echo 'class="active"'?> href="../index.php">Home</a></li>
+  <li class="dropdown">
+    <a href="javascript:void(0)" class="dropbtn">Stage</a>
+    <div class="dropdown-content">
+      <a href="../StoricoStage/index.php">Storico Stage</a>
+      <a href="../inserimentoStage/index.php">Organizza Stage</a>
+    </div>
+  </li>
+  <li class="dropdown">
+    <a href="javascript:void(0)" class="dropbtn">Studenti</a>
+    <div class="dropdown-content">
+      <a href="../inserimenti/inserimentoStudenti.html">Inserisci Studenti</a>
+      <a href="../visualizza/visualizzaStudenti.php">Visualizza Studenti</a>
+    </div>
+  </li>
+  <li class="dropdown">
+    <a href="javascript:void(0)" class="dropbtn">Aziende</a>
+    <div class="dropdown-content">
+      <a href="../inserimenti/inserimentoAziende.html">Inserisci Aziende</a>
+      <a href="../visualizza/visualizzaAziende.php">Visualizza Aziende</a>
+    </div>
+  </li>
+  <li class="dropdown">
+    <a href="javascript:void(0)" class="dropbtn">Tutor Scolastici</a>
+    <div class="dropdown-content">
+      <a href="../inserimenti/inserimentoTutorScolastici.html">Inserisci Tutor Scolastici</a>
+      <a href="../visualizza/visualizzaTutorS.php">Visualizza Tutor Scolastici</a>
+    </div>
+  </li>
+</ul>

Materials/style.css

@@ -52,15 +52,14 @@ body{
     background: #ddd;
     color: black;
   } 
-  /* Add a black background color to the top navigation */
+  /*
 .topnav {
     background-color: #333;
     overflow: hidden;
     width: 100%;
     font-family: Arial, Helvetica, sans-serif;
   }
   
-  /* Style the links inside the navigation bar */
   .topnav a {
     float: left;
     color: #f2f2f2;
@@ -70,14 +69,61 @@ body{
     font-size: 17px;
   }
   
-  /* Change the color of links on hover */
   .topnav a:hover {
     background-color: #ddd;
     color: black;
   }
   
-  /* Add a color to the active/current link */
   .topnav a.active {
     background-color: #4CAF50;
     color: white;
-  }
+  }*/
+ul{
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: #333;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 20px;
+}  
+li{
+  float: left;
+}
+li a, .dropbtn{
+  display: inline-block;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+li a:hover, .dropbtn:hover .dropbtn{
+  background-color: #4CAF50;
+}
+
+li.dropdown {
+  display: inline-block;
+}
+
+.dropdown-content {
+  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-content a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+  text-align: left;
+}
+
+.dropdown-content a:hover {background-color: #f1f1f1;}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}