Foros del Web » Creando para Internet » CSS »

Menu horizontal

 Estas en el tema de Menu horizontal en el foro de CSS en Foros del Web. Hola amigos de nuevo por aca con un nuevo proyecto y pidiendo algo se soporte, bueno este es mi problema: La imagen del menu que ...
  #1 (permalink)  
Antiguo 14/08/2014, 18:05
Avatar de satanson123  
Fecha de Ingreso: julio-2012
Mensajes: 217
Antigüedad: 11 años, 8 meses
Puntos: 2
Menu horizontal
Hola amigos de nuevo por aca con un nuevo proyecto y pidiendo algo se soporte, bueno este es mi problema:

La imagen del menu que vemos a continuacion la parte del subelemento quiero que se acomode al tamaño del elemento principal.



Espero sus respuesta pronto.
  #2 (permalink)  
Antiguo 14/08/2014, 18:08
Avatar de webosiris
Moderador egiptólogo
  
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 22 años, 2 meses
Puntos: 998
Respuesta: Menu wordpress horizontal
esto no tiene que ver particularmente con wordpress sino con tu código css. Sin el código relativo a ese menú me temo que no te podemos ayudar
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 14/08/2014, 18:30
Avatar de satanson123  
Fecha de Ingreso: julio-2012
Mensajes: 217
Antigüedad: 11 años, 8 meses
Puntos: 2
Respuesta: Menu wordpress horizontal
Cita:
Iniciado por webosiris Ver Mensaje
esto no tiene que ver particularmente con wordpress sino con tu código css. Sin el código relativo a ese menú me temo que no te podemos ayudar
ok amigo aqui te dejo el codigo completo del menu, disculpa si esta un poco liado

Código CSS: 
Ver original
  1. /*Menu top*/
  2. #pagemenu{
  3.     width: 960px;
  4.     height: 30px;
  5.     float:right;
  6.     box-shadow: 0 0 3px #1c3b53;
  7.     background: #0f89df;
  8.     color: #fff;
  9.     overflow:hidden;
  10. }
  11. #pagemenu ul{
  12.     float:left;
  13.     clear:left;
  14.     text-align:center;
  15.     padding:0;
  16.     margin:0;
  17.     list-style-type:none;
  18. }
  19. #pagemenu ul li {
  20.  
  21.     float: left;
  22.     border-left: 1px solid #0063a9;
  23.     
  24.     
  25.  
  26.     }
  27. #pagemenu ul li:first-child{
  28.     border-left: none;
  29.         
  30. }
  31. #pagemenu ul li:last-child{
  32.     border-right: none;
  33.  
  34.     
  35. }
  36. #pagemenu ul li a{
  37.     
  38.     float:left;
  39.     text-decoration:none;
  40.     color: #fff;
  41.     font-weight:bold;
  42.     padding: 7px 17px 7px 17px;
  43.     margin-top: -1px;
  44.     font-size: 14px;
  45.     position: relative;
  46.     -webkit-transition: color .35s ease-in;
  47.     -moz-transition: color .35s ease-in;
  48.     -o-transition: color .35s ease-in;
  49.     transition: color .35s ease-in;
  50.     -webkit-transition: background-color .2s ease-in;
  51.     -moz-transition: background-color .2s ease-in;
  52.     -o-transition: background-color .2s ease-in;
  53.     transition: background-color .2s ease-in;
  54.     
  55.     
  56. }
  57. #pagemenu ul li a:hover {
  58.     
  59.     float:left;
  60.     text-decoration:none;
  61.     background: #49b3fe;
  62.     text-decoration:none;
  63.     color: #fff;
  64.     font-weight:bold;
  65.     font-size: 14px;
  66.     position: relative;
  67.     
  68.     
  69. }
  70.  
  71. #pagemenu ul li.current-menu-parent ul li.current-menu-item a:hover{
  72.     background:none;
  73. }
  74. #pagemenu li > ul{
  75.     opacity: 0;
  76.     filter: alpha(opacity=0);
  77.     position:absolute;
  78.     margin-top: 50px;
  79.     margin-left: -1px;
  80.     padding:0;
  81.     text-align:left;
  82.     width: 190px;
  83.     z-index: 999;   
  84.     -webkit-box-shadow: 0 1px 5px #49b3fe;
  85.     -moz-box-shadow: 0 1px 5px #49b3fe;
  86.     box-shadow: 0 1px 5px #49b3fe;
  87.     -webkit-transition: all 0.3s ease;
  88.     -moz-transition:    all 0.3s ease;
  89.     -o-transition:      all 0.3s ease;
  90.     -ms-transition:     all 0.3s ease;
  91.     transition:         all 0.3s ease;
  92.     
  93. }
  94.  
  95. #pagemenu li:hover > ul{
  96.     opacity: 1;
  97.     filter: alpha(opacity=100);
  98.     border-left: 1px solid #0063a9;
  99.     border-right: 1px solid #0063a9;    
  100.     border-bottom: 1px solid #0063a9;
  101.     margin-top: 30px;
  102.     background: #0f89df;
  103.     
  104.     }
  105.     
  106. #pagemenu ul li:hover > a {
  107.     color: #fff;    
  108.     background-image: none;
  109.   background-color: #49b3fe;
  110. }
  111. #pagemenu li li{    
  112.     border: none;
  113.     
  114. }
  115. #pagemenu li li a{
  116.     width: 170px;
  117.     background:#0f89df;
  118.     padding: 10px;
  119.     -webkit-transition: color .35s ease-in;
  120.     -moz-transition: color .35s ease-in;
  121.     -o-transition: color .35s ease-in;
  122.     transition: color .35s ease-in;
  123.     -webkit-transition: background-color .2s ease-in;
  124.     -moz-transition: background-color .2s ease-in;
  125.     -o-transition: background-color .2s ease-in;
  126.     transition: background-color .2s ease-in;
  127.     }
  128. #pagemenu li li a:hover{
  129.     color: #fff;
  130.     background: #49b3fe;
  131.     }
  132.  
  133. #pagemenu li.current-menu-item a, #pagemenu li.current-menu-parent a{
  134.     color: #fff;
  135.     background:#49b3fe;
  136.     text-decoration:none;
  137.     }
  138. #pagemenu li.current-menu-item a:hover, #pagemenu li.current-menu-parent a:hover{
  139.     color: #fff;
  140.     background:#49b3fe;
  141.     text-decoration: underline;
  142.     }
  143.     
  144.  
  145.  
  146. #pagemenu li.current-menu-item ul li a, #pagemenu li.current-menu-parent ul li a {
  147.  
  148.     color: #fff;
  149.     
  150.     }
  151. #pagemenu li.current-menu-parent ul li.current-menu-item a, #pagemenu li.current-menu-parent ul li.current-menu-item a:hover{
  152.  
  153.     color: #fff;
  154.  
  155. }
  #4 (permalink)  
Antiguo 15/08/2014, 07:08
Avatar de webosiris
Moderador egiptólogo
  
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 22 años, 2 meses
Puntos: 998
Respuesta: Menu horizontal
en la línea 82 y en la 116 tienes un width. Elimínalo a ver que pasa.
Asimismo deberás de sacarle el float a los LI del submenú (en tu código flotan todos los li, solo deben de flotar los li del menú principal). Eso lo puedes hacer agregando float:none a #pagemenu li li
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -

Etiquetas: horizontal, post, wordpress
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 05:47.