Mejoras en el menú

assets/css/main.css

@@ -1,6 +1,7 @@
 /* Basic */
 * {
   box-sizing: border-box;
+  margin: 0px;
 }
 
 /* Headers */
@@ -39,11 +40,40 @@ h4 {
   width: 11px;
 }
 .menu {
-    background-color: #1f2c3d;
-    color: #dadada;
     text-align: right;
     font-size: 15px;
 }
+.menu nav a{
+  text-decoration: none;
+  color: inherit;
+  font-size: 14px;
+}  
+.menu nav li{
+  display: inline-block;
+  width: 150px;
+  height: 30px;
+  padding: 5px 10px;
+  background-color :#1f2c3d;
+  border: 1px solid #d3ebff;
+  text-align: center;
+  color :#d3ebff;
+  position: relative;
+}      
+.menu nav li:hover{
+  background-color:#d3ebff;
+  color:#1f2c3d;
+  border-color: #1f2c3d;
+} 
+.menu nav li>ul{
+  display: none;
+}
+.menu nav li:hover>ul{
+  display: block;
+  position: absolute;
+  top: 29px;
+  right: -1px;
+}
+
 
 /* Paragraphs */
 p {

assets/php/header.php

@@ -4,22 +4,29 @@
 
     switch(true){
         case strpos($page, 'detalles'): $page = 'Detalles'; break;
-        case strpos($page, 'bocetos'): $page = 'Detalles'; break;
-        case strpos($page, 'miembros'): $page = 'Detalles'; break;
-        case strpos($page, 'planificacion'): $page = 'Detalles'; break;
-        case strpos($page, 'contacto'): $page = 'Detalles'; break;
+        case strpos($page, 'bocetos'): $page = 'Bocetos'; break;
+        case strpos($page, 'miembros'): $page = 'Miembros'; break;
+        case strpos($page, 'planificacion'): $page = 'Planificación'; break;
+        case strpos($page, 'contacto'): $page = 'Contacto'; break;
         default: $page = 'FDI-Cines'; $prefix = './'; break;
     }
     
     echo"<div class='header'>
             <a href='{$prefix}'><img src='{$prefix}img/favicon2.png' /> CompluCine</a> | {$page}
             <div class='menu'>
-                <a href='{$prefix}'>Inicio |</a>
-                <a href='{$prefix}detalles/'>Detalles |</a>
-                <a href='{$prefix}bocetos/'>Bocetos |</a>
-                <a href='{$prefix}miembros/'>Miembros |</a>
-                <a href='{$prefix}planificacion/'>Planificación |</a>
-                <a href='{$prefix}contacto/'>Contacto</a>
+                <nav>
+                    <li>Iniciar Sesión</li>
+                    <li>Menú
+                        <ul>
+                            <li><a href='{$prefix}'>Inicio</a></li>
+                            <li><a href='{$prefix}detalles/'>Detalles</a></li>
+                            <li><a href='{$prefix}bocetos/'>Bocetos</a></li>
+                            <li><a href='{$prefix}miembros/'>Miembros</a></li>
+                            <li><a href='{$prefix}planificacion/'>Planificación</a></li>
+                            <li><a href='{$prefix}contacto/'>Contacto</a></li>
+                        <ul>
+                    </li>
+                </nav>
             </div>
         </div>\n";
 ?>