MENU CON ESTILOS

http://www.falconmasters.com/tutoriales/menu-desplegable-animaciones-css3/

<html>
  <head>
  <title>Menu Desplegable</title>
  <style type="text/css">
   
  * {
  margin:0px;
  padding:0px;
  }
   
  #header {
  margin:auto;
  width:500px;
  font-family:Arial, Helvetica, sans-serif;
  }
   
  ul, ol {
  list-style:none;
  }
   
  .nav > li {
  float:left;
  }
   
  .nav li a {
  background-color:#000;
  color:#fff;
  text-decoration:none;
  padding:10px 12px;
  display:block;
  }
   
  .nav li a:hover {
  background-color:#434343;
  }
   
  .nav li ul {
  display:none;
  position:absolute;
  min-width:140px;
  }
   
  .nav li:hover > ul {
  display:block;
  }
   
  .nav li ul li {
  position:relative;
  }
   
  .nav li ul li ul {
  right:-140px;
  top:0px;
  }
   
  </style>
  </head>
  <body>
  <div id="header">
  <ul class="nav">
  <li><a href="">Inicio</a></li>
  <li><a href="">Servicios</a>
  <ul>
  <li><a href="">Submenu1</a></li>
  <li><a href="">Submenu2</a></li>
  <li><a href="">Submenu3</a></li>
  <li><a href="">Submenu4</a>
  <ul>
  <li><a href="">Submenu1</a></li>
  <li><a href="">Submenu2</a></li>
  <li><a href="">Submenu3</a></li>
  <li><a href="">Submenu4</a></li>
  </ul>
  </li>
  </ul>
  </li>
  <li><a href="">Acerca de</a>
  <ul>
  <li><a href="">Submenu1</a></li>
  <li><a href="">Submenu2</a></li>
  <li><a href="">Submenu3</a></li>
  <li><a href="">Submenu4</a></li>
  </ul>
  </li>
  <li><a href="">Contacto</a></li>
  </ul>
  </div>
  </body>
  </html>
Descarga
Menú Listas - Estilo.pdf
Documento Adobe Acrobat 83.0 KB
Descarga

MENÚ CON LISTAS

<ul >
<li>
<a title="/*lo que quiero que me muestre cuando coloco el mouse sobre la imagen*/" href="/*url a donde me va a llevar*/"><img src="/*Donde esta ubicada la imagen*/" width="108" height="260" alt=" lo que quiero que me muestre cuando coloco el mouse sobre la imagen "></a>
</li>
<li>
<a title="Gangplank" href="file:///C:/Users/Karol/Desktop/pagina%20web%202.0/subpaginas/Gangplank.html"><img src="C:\Users\Karol\Desktop\pagina web 2.0\pasada/Gangplank.jpg" width="108" height="260" alt="Gangplank"></a>
</li>
<li>
<a  title="Graves" href="file:///C:/Users/Karol/Desktop/pagina%20web%202.0/subpaginas/Graves.html"><img src="C:\Users\Karol\Desktop\pagina web 2.0\pasada/Graves.jpg" width="108" height="260" alt="Graves"></a>
</li>
<li>
<a title="Illaoi" href="file:///C:/Users/Karol/Desktop/pagina%20web%202.0/subpaginas/Illaoi.html"><img src="C:\Users\Karol\Desktop\pagina web 2.0\pasada/Illaoi.jpg" width="108" height="260" alt="Illaoi"></a>
</li>
<li>
<a title="MissFortune" href="file:///C:/Users/Karol/Desktop/pagina%20web%202.0/subpaginas/MissFortune.html"><img src="C:\Users\Karol\Desktop\pagina web 2.0\pasada/MissFortune.jpg" width="108" height="260" alt="MissFortune"></a>
</li>
<li>
<a title="Nautilus" href="file:///C:/Users/Karol/Desktop/pagina%20web%202.0/subpaginas/Nautilus.html"><img src="C:\Users\Karol\Desktop\pagina web 2.0\pasada/nautilus.jpg" width="108" height="260" alt="Nautilus"></a>
</li>
<li>
<a title="Tahm Kench" href="file:///C:/Users/Karol/Desktop/pagina%20web%202.0/subpaginas/Tahm_Kench.html"><img src="C:\Users\Karol\Desktop\pagina web 2.0\pasada/Tahm_Kench.jpg" width="108" height="260" alt="Tahm Kench"></a>
</li>
<li>
<a title="TwistedFate" href="file:///C:/Users/Karol/Desktop/pagina%20web%202.0/subpaginas/TwistedFate.html"><img src="C:\Users\Karol\Desktop\pagina web 2.0\pasada/TwistedFate.jpg" width="108" height="260" alt="TwistedFate"></a>
</li>
<li>
<a title="Pyke" href="file:///C:/Users/Karol/Desktop/pagina%20web%202.0/subpaginas/Pyke.html"><img src="C:\Users\Karol\Desktop\pagina web 2.0\pasada/Pyke.jpg" width="108" height="260" alt="Pyke"></a>
</li>
</ul>

<ul>

       <LI>

               <a title:"nombre_img" href="url-pagina o dirección"> <img src=direccion_img" width="108" heigth="260" alt="nombre"> </a>

       </li>

</ul>

 

PARA CADA PAGINA SE DEBE DE HACER EL MISMO CÓDIGO 

 

<ul>

       <LI>

               <a title:"nombre_img" href="url-pagina o dirección"> <img src=direccion_img" width="108" heigth="260" alt="nombre"> </a>

       </li>

</ul>

 

 

 

<ul>

       <LI>

               <a title:"nombre_img" href="url-pagina o dirección"> <img src=direccion_img" width="108" heigth="260" alt="nombre"> </a>

       </li>

</ul>