diff --git a/modulos/header/estilos.css b/modulos/header/estilos.css
index ea31407..6f3010b 100644
--- a/modulos/header/estilos.css
+++ b/modulos/header/estilos.css
@@ -5,6 +5,16 @@
 .sand-icon:hover{
   background-color: rgb(0,0,0,0.1);
 }
+.desplegar{
+  background-color: #E9AD0C;
+}
+.backcolor{
+  color: #fff;
+}
+.backcolor:hover{
+  background-color: rgb(0,0,0,0.2);
+  color: #fff;
+}
 .btn-header-dorado{
    color: #fff;
    /* padding: 6px 7px; */
@@ -43,5 +53,5 @@
   color: #fff;
 }
 .search-button-icon:hover{
-  background-color: rgb(0,0,0,0.4);
+  background-color: rgb(0,0,0,0.2);
 }
diff --git a/modulos/header/index.html b/modulos/header/index.html
index 100da3a..e3653b9 100644
--- a/modulos/header/index.html
+++ b/modulos/header/index.html
@@ -42,7 +42,7 @@
             <a href="#" id="navbarDropdown" class="btn-header-dorado py-sm-2 px-sm-2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               Produccion Editorial
             </a>
-            <div class="dropdown-menu" aria-labelledby="navbarDropdown" id="lista">
+            <div class="dropdown-menu desplegar" aria-labelledby="navbarDropdown" id="lista">
             </div>
           </li>
         </ul>
@@ -57,29 +57,10 @@
   </nav>
   <!--/NAVBAR-->
 
-  <!--USO DE AXIOS PARA CONSUMIR API-->
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
-  <script>
-    //const testURL = 'http://venus.acatlan.unam.mx:3000/libro?limite=10&desde=1';
-    axios.get('http://venus.acatlan.unam.mx:3000/libro?limite=5&desde=1')
-      .then(function(response) {
-        // creacion dinamica de elementos HTML en una página vacia
-        for (i = 0; i < response.data.data.length; i++) {
+  <script type="text/javascript" src="index.js">
 
-          var elementoli = document.createElement("li")
-          var elemento = document.createElement("a")
-
-          var contenido = document.createTextNode(`${response.data.data[i].titulo}`)
-          elemento.className += "dropdown-item";
-          elemento.appendChild(contenido)
-
-          elementoli.appendChild(elemento)
-
-          var lis = document.getElementById('lista').appendChild(elementoli)
-        }
-      })
   </script>
-  <!--/USO DE AXIOS PARA CONSUMIR API-->
 
   <!-- Optional JavaScript -->
   <!-- jQuery first, then Popper.js, then Bootstrap JS -->
diff --git a/modulos/header/index.js b/modulos/header/index.js
new file mode 100644
index 0000000..ab50300
--- /dev/null
+++ b/modulos/header/index.js
@@ -0,0 +1,27 @@
+
+  //<!--USO DE AXIOS PARA CONSUMIR API-->
+
+    //const testURL = 'http://venus.acatlan.unam.mx:3000/libro?limite=10&desde=1';
+    axios.get('http://venus.acatlan.unam.mx:3000/libro?limite=5&desde=1')
+      .then(function(response) {
+        // creacion dinamica de elementos HTML en una página vacia
+        for (i = 0; i < response.data.data.length; i++) {
+
+          var elementoli = document.createElement("li")
+          var elemento = document.createElement("a")
+
+          var contenido = document.createTextNode(`${response.data.data[i].titulo}`)
+          elemento.className += "dropdown-item";
+
+          elemento.className += " backcolor";
+          elemento.href = `${response.data.data[i].imagen}`;
+
+          elemento.appendChild(contenido)
+
+          elementoli.appendChild(elemento)
+
+          var lis = document.getElementById('lista').appendChild(elementoli)
+        }
+      })
+
+  //<!--/USO DE AXIOS PARA CONSUMIR API-->