elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  problemas con estilos de un menu dropdown
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: problemas con estilos de un menu dropdown  (Leído 2,321 veces)
AlexKurban

Desconectado Desconectado

Mensajes: 36


Ver Perfil
problemas con estilos de un menu dropdown
« en: 15 Julio 2015, 05:45 am »

Hola a todos, queria pediros ayuda para poder estilizar un dropdown ya que llevo toda la noche con ello y ya no puedo mas... este seria el resultado final:

http://prntscr.com/7sswzm

y asi es como lo tengo yo de momento, ademas de que me el dropdown de la derecha no esta ajustado con la anchura:

http://prntscr.com/7sua3p


aqui esta el html5:
Código
  1. <ul class="menu">
  2.                    <li><a href="#">&#1051;&#1070;&#1041;&#1054;&#1043;&#1054; &#1058;&#1048;&#1055;&#1040;<img src="img/drop_dark.png" id="tipo" alt=""></a>
  3.                        <ul>
  4.                            <li><a href="#compacta">&#1050;&#1054;&#1052;&#1055;&#1040;&#1050;&#1058;-&#1050;&#1040;&#1052;&#1045;&#1056;&#1040;</a></li>
  5.                            <li><a href="#sinEspejo">&#1041;&#1045;&#1047;&#1047;&#1045;&#1056;&#1050;&#1040;&#1051;&#1068;&#1053;&#1040;&#1071;</a></li>
  6.                            <li><a href="#espejo">&#1047;&#1045;&#1056;&#1050;&#1040;&#1051;&#1068;&#1053;&#1040;&#1071;</a></li>
  7.                            <li><a href="#medioFormato">&#1057;&#1056;&#1045;&#1044;&#1053;&#1045;&#1060;&#1054;&#1056;&#1052;&#1040;&#1058;&#1053;&#1040;&#1071;</a></li>
  8.                        </ul>
  9.                    </li>
  10.                </ul>
  11.                <ul class="menu">
  12.                    <li><a href="#marca">&#1051;&#1070;&#1041;&#1054;&#1043;&#1054; &#1041;&#1056;&#1045;&#1053;&#1044;&#1040;<img src="img/drop_dark.png" alt=""></a>
  13.                        <ul>
  14.                            <li><a href="#canon">CANON</a></li>
  15.                            <li><a href="#nikon">NIKON</a></li>
  16.                            <li><a href="#sony">SONY</a></li>
  17.                            <li><a href="#fujifilm">FUJIFILM</a></li>
  18.                            <li><a href="#samsung">SAMSUNG</a></li>
  19.                            <li><a href="#olympus">OLYMPUS</a></li>
  20.                            <li><a href="#panasonic">PANASONIC</a></li>
  21.                            <li><a href="#polaroid">POLAROID</a></li>
  22.                        </ul>
  23.                    </li>
  24.                </ul>

y aqui la hoja de estilos:

Código
  1. /* ==========================================================================
  2.    MENU DROPDOWN
  3.    ========================================================================== */
  4. ul.menu,
  5. ul.menu ul,
  6. ul.menu li,
  7. ul.menu a {
  8.    margin: 0;
  9.    padding: 0;
  10.    border: none;
  11.    outline: none;
  12. }
  13.  
  14. ul.menu{
  15.     margin:6px 0;
  16. }
  17.  
  18. ul.menu li {
  19.    position: relative;
  20.    padding-left: 10px;
  21.    list-style: none;
  22.    float: left;
  23.    display: block;
  24.    height: 30px;
  25. }
  26.  
  27.  
  28. ul.menu li a {
  29.    display: block;
  30.    padding-left: 10px;
  31.    margin: 0;
  32.    line-height: 30px;
  33.    text-decoration: none;
  34.    border: 1px solid #393942;
  35. }
  36.  
  37. ul.menu li a:hover{
  38.    border: 1px solid #48F;
  39.    background: rgba(68, 136, 255, .1);
  40.  
  41.  
  42. }
  43.  
  44. ul.menu li a img{
  45.    padding-bottom: 3px;
  46.    padding-left: 10px;
  47.    padding-right: 5px;
  48. }
  49.  
  50. ul.menu li a img[id|="tipo"]{
  51.    padding-left: 60px;
  52. }
  53.  
  54. a[id|="pagar"]{
  55.    text-decoration: none;
  56.    margin-left: 70px;
  57.    font-family: 'robotomedium';
  58.    color: #fff;
  59. }
  60.  
  61. ul.menu li > ul{
  62.    visibility: hidden;
  63.    position: absolute;
  64.    top: 100%;
  65.    left: 0;
  66.    z-index: 598;
  67.    width: 100%;
  68.    display: inline-block;
  69. }
  70.  
  71. ul.menu li:hover > ul{
  72.    visibility: visible;
  73.    opacity: 1;
  74. }
  75.  
  76.  
  77. ul.menu li > ul > li{
  78.    width: 196px;
  79.    background: #fff;
  80. }
  81.  
  82.  
  83.  
  84. /* ==========================================================================
  85.    END MENU DROPDOWN
  86.    ========================================================================== */
  87.  


socorro


« Última modificación: 21 Julio 2015, 17:06 pm por #!drvy » En línea

Tropiezo, me levanto, continuo
Usuario Invitado


Desconectado Desconectado

Mensajes: 625



Ver Perfil
Re: problemas con estilos de un menu dropdown
« Respuesta #1 en: 15 Julio 2015, 14:58 pm »

Código
  1. .menu {
  2.    box-shadow: 0 5px 8px rgba(0,0,0,.1);
  3. }
  4. .menu li {
  5.    display: inline-block;
  6. }
  7. .menu a {
  8.    border: none;
  9.    color: #444;
  10.    display: block;
  11.    font-size: .85rem;
  12.    padding: .5rem .65rem;
  13.    text-align: center;
  14.    text-decoration: none;
  15.    text-transform: uppercase;
  16.    transition: all .2s ease-in;
  17. }
  18. .menu a:hover {
  19.    color: #00bbff; /* cambia por el celeste de la imagen */
  20. }

Te recomiendo primero que aprendas éstas cosas básicas antes de querer estilizar toda una web.


En línea

"La vida es muy peligrosa. No por las personas que hacen el mal, si no por las que se sientan a ver lo que pasa." Albert Einstein
AlexKurban

Desconectado Desconectado

Mensajes: 36


Ver Perfil
Re: problemas con estilos de un menu dropdown
« Respuesta #2 en: 29 Julio 2015, 17:47 pm »

Hola, han sido una serie de errores de novato (y yo soy un novato) que los he solucionado ya. Muchas gracias de todas formas
En línea

Tropiezo, me levanto, continuo
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Problemas con Menu Muy Interesante
Diseño Gráfico
(¯`·.¸º|- POLIFORMIC -|º¸.·´¯) 1 1,649 Último mensaje 19 Diciembre 2005, 20:33 pm
por aNexos
Problemas con un menu
PHP
Zeroql 2 1,425 Último mensaje 22 Junio 2008, 23:50 pm
por Zeroql
Nuevo en HTML y quiero una ayuda con DropDown y con el IF
Desarrollo Web
ramonbatista 6 4,706 Último mensaje 6 Enero 2011, 16:29 pm
por AFelipeTrujillo
3 campos con dropdown ajax. Help
PHP
DJmixmancar 0 2,379 Último mensaje 13 Enero 2011, 17:21 pm
por DJmixmancar
Menú dropdown no funciona
Desarrollo Web
Rilacku159 0 2,530 Último mensaje 27 Marzo 2021, 00:31 am
por Rilacku159
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines