Resulta que para empezar me descargue el dreamweaver cs6 y una plantilla de un sitio web que me gusto bantante. Peero, esa plantilla no tenia submenus que es lo que me hacia falta, entonces buscando por la web encontre como agregarlo al codigo en html y en css.
Al principio:
[URL="http://prntscr.com/89c8nm"]http://prntscr.com/89c8nm[/URL]
Luego de agregar el codigo:
[URL="http://prntscr.com/89c8wg"]http://prntscr.com/89c8wg
[/URL]
Ahora el problema era que quedaba corrido hacia el borde de la pantalla pero debia quedar al mismo nivel que el primer boton, entonces hablando con un usuario de otra pagina me dio una solucion, por lo que modifique el css y se solociono parcialmente, porque en google chrome funciona bien pero lo pruebo en internet explorer y se muestra el submenu sobre el menu tapando todo.
En IE (version 9):
[URL="http://prntscr.com/89c9rn"]http://prntscr.com/89c9rn
[/URL]
En Firefox no lo he podido probar..
Codigo INICIAL
Código CSS :
/*********************************************************************************/
/* Menu */
/*********************************************************************************/
#menu
{
}
#menu ul li
{
display: inline-block;
padding-left: 1.2em; padding-right: 1.3em;
background: #ff8a0e;
text-align: center;
}
#menu li
{
display: inline-block;
float: left;
}
#menu ul li ul
{
display: none; position: absolute; text-align: center;
}
#menu ul li ul li
{
position: relative;
display: inline-block;
left: -382px;
float: left;
background: #ff8a0e;
}
#menu ul li:hover ul
{
display: inline-block;
position: absolute; padding: 0em;
}
#menu li a, #menu li span
{
display: inline-block;
padding: 1em 1em;
text-decoration: none;
font-size: 0.9em;
font-weight: 600;
text-transform: uppercase;
outline: 0;
color: #FFF;
}
#menu li:hover a, #menu li.active a, #menu li.active span
{
}
#menu .current_page_item a
{
color: #FFF;
}Codigo FINAL
Código CSS :
/*********************************************************************************/
/* Menu */
/*********************************************************************************/
#menu
{
}
#menu ul li
{
display: inline-block;
padding: 0em;
background: #ff8a0e;
text-align: center;
}
#menu li
{
display: inline-block;
float: left;
}
#menu ul li ul li {
position: relative;
left: -269px;
float: left;
background: #ff8a0e;
}
#menu ul li ul
{
display: none; position: absolute; text-align: center;
}
#menu ul li:hover ul
{
display: inline-block;
position: absolute; padding: 0em;
}
#menu li a, #menu li span
{
display: inline-block;
padding: 1em 1em;
text-decoration: none;
font-size: 0.9em;
font-weight: 600;
text-transform: uppercase;
outline: 0;
color: #FFF;
}
#menu li:hover a, #menu li.active a, #menu li.active span
{
}
#menu .current_page_item a
{
color: #FFF;
}Código HTML :
<div id="menu"> <ul> <li class="current_page_item"><a href="http://www.melancor.com.ar/index" accesskey="1" title="">Homepage</a></li> <li><a href="http://www.melancor.com.ar/nosotros" accesskey="2" title="">Nosotros</a></li> <li><a href="http://www.melancor.com.ar/Trabajos" accesskey="3" title="">Trabajos</a> <ul> <li><a href="http://www.melancor.com.ar/cocina" accesskey="5" title="">Cocina</a></li> <li><a href="http://www.melancor.com.ar/dormitorio" accesskey="6" title="">Dormitorio</a></li> <li><a href="http://www.melancor.com.ar/oficinayliving" accesskey="7" title="">Oficina y Living</a></li> <li><a href="http://www.melancor.com.ar/marmoles" accesskey="8" title="">Mesadas</a></li> <li><a href="http://www.melancor.com.ar/baño" accesskey="9" title="">Baño</a></li> <li><a href="http://www.melancor.com.ar/quincho" accesskey="10" title="">Quincho</a></li> <li><a href="http://www.melancor.com.ar/negocio" accesskey="11" title="">Negocio</a></li> </ul> </li> <li><a href="http://www.melancor.com.ar/contacto" accesskey="4" title="">Contacto</a></li> </ul> </div>
Primero queria saber si a ustedes les pasa lo mismo con mi codigo o si se les ve bien.
Si sucede lo mismo, podrian alguien decirme como solucionarlo?
Saludos y gracias de antemano..!
