Tema: Crear menú horizontal, no funciona bien
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 12/01/2016, 15:50
Avatar de BramSt
BramSt
 
Fecha de Ingreso: abril-2015
Mensajes: 117
Antigüedad: 9 años
Puntos: 5
Crear menú horizontal, no funciona bien
Hola, pues estoy haciendo un pequeño código de un menú horizontal muy básico, pero no me termina de salir bien.

El ejercicio es el siguiente, y además tiene que cambiar el color del li cuando pase el ratón.



Y tengo estos problemas:

-cuando tengo el menú construído, hay un pequeño hueco que entre los li que no consigo eliminar, y se hace patente al pasar el raton por encima.

-al hacer un padding para tratar de ensanchar los enlaces, después al pasar el ratón resulta que me colorea sobrepasando los bordes del propio menú... y si hago el padding al li, es el propio borde del li el que sobrepara al menu. Vamos, que hay algo que no va bien con esto.

-Por último, me gustaría que me explicárais a la hora de hacer un menú horizontal, la diferencia entre hacer un float:left y un display:inline.

Muchas gracias. Aquí teneis los códigos:

Código HTML: 
Ver original
  1. <html>
  2.     <head>
  3.         <title>
  4.         </title>
  5.         <link rel="stylesheet" type="text/css" href="Estilos.css"/>
  6.         
  7.     </head>
  8.     <body>
  9.     
  10.             <ul id="menu">
  11.                 <li><a href="#" title="Enlace genérico">Inicio</a></li>
  12.                 <li><a href="#" title="Enlace genérico">Elemento 2</a></li>
  13.                 <li><a href="#" title="Enlace genérico">Elemento 3</a></li>
  14.                 <li><a href="#" title="Enlace genérico">Elemento 4</a></li>
  15.                 <li><a href="#" title="Enlace genérico">Elemento 5</a></li>
  16.                 <li ><a href="#" title="Enlace genérico">Elemento 6</a></li>
  17.             </ul>
  18.         
  19.     </body>
  20. </html>


Y el CSS:




Código CSS: 
Ver original
  1. body
  2. {
  3.     font-family:papyrus;
  4. }
  5.  
  6. #menu
  7. {
  8.     background-color:#58D3F7;
  9.     list-style-type:none;
  10.     padding:0;
  11.     display:inline;
  12.     border-left:1px solid blue;
  13.     border-top:1px solid blue;
  14.     border-bottom:1px solid blue;
  15.     
  16. }
  17.  
  18. #menu li
  19. {
  20.     display:inline;
  21.     border-right:1px solid blue;
  22.     
  23.     /*padding:4px;*/
  24.     
  25.     
  26.     
  27.     
  28.     
  29. }
  30.  
  31. #menu li a
  32. {
  33.     text-decoration:none;
  34.     
  35.     /*padding:4px;*/
  36.     
  37.     
  38.     
  39. }
  40.  
  41. #menu li a:hover
  42. {
  43.     background-color:red;
  44. }