Buenas,
estoy realizando un menú horizontal en mi web y por más pasos que realizo el menú solo me lo muestra en formato vertical
Me gustaría que lo mostrase de la siguiente manera:
Inicio | Productos | Preguntas Frecuentas | ...
Ahora mismo me lo está mostrando:
Inicio |
Productos |
Preguntas Frecuentas | ...
El código es el siguiente:
Código PHP:
Ver original...
<div id="navigacija">
<div id="linkMenu">
<ul>
<li><a href=" index.php">Inicio</a></li>
<!--</ul>
<ul>-->
<!--<li><a href=" index.php">Productos</a></li>-->
<!--<li><a href="#" onClick="producto();">Productos</a></li>-->
<li>
<div class="menu">
<ul>
<li>
<a href="#">Productos</a>
<ul>
<!--<li><a href="#" onClick="sofas();">Sofas</a></li>-->
<li><a href="sofas.php">Sofas</a></li>
<!--<li><a href="#" onClick="butacas();">Butacas</a></li>
<li><a href="#" onClick="sillas();">Sillas</a></li>-->
<li><a href="butacas.php">Butacas</a></li>
<li><a href="sillas.php">Sillas</a></li>
<!--<li><a href="http://www.ajaxshake.com/es/JS/12111/mootools.html">Mootools</a></li>-->
</ul>
</li>
</ul>
</div>
</li>
<!--</ul>
<ul>-->
<!--<li><a href=" index.php">Preguntas frecuentes</a></li>-->
<li><a href="#" onClick="pregfrec();">Preguntas frecuentes</a></li>
<!--</ul>
<ul>-->
<li><a href=" index.php">Ofertas</a></li>
<!--</ul>
<ul>-->
<!--<li><a href="#" class='contact'>Contacto</a></li>-->
<li><a href="#" onClick="contacto();">Contacto</a></li>
<!--<li><a href="contacto.php">Contacto</a></li>-->
</ul>
</div>
</div>
...
El código CSS es:
Código CSS:
Ver original...
#navigacija {
/* con clear y float decimos donde queremos que si situen, por ejemplo al lado izquierdo de una imagen entonces pondríamos left*/
clear: none;
float: none;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font: 9pt Arial, Verdana, Sans-Serif;
}
#navigacija ul {
list-style: none;
width: 150px;
margin: 3px 0 3px 0;
padding: 0;
font: 9pt Arial, Verdana, Sans-Serif;
/*display:inline;*/
}
/* separación entre botón y botón */
#navigacija li {
margin-bottom: 4px;
/*display:inline;*/
}
/* Marca el tamaño de los botones y el color que llevan */
#navigacija li a, #navigacija li a:visited {
text-align: center;
height: 20px;
text-decoration: none;
color: #fff;
display: block;
padding: 6px 8px 0 10px;
background: #908383;
}
/* Cuando se pasa el ratón por encima cambia de color el botón */
#navigacija li a:hover {
/*background: #A9CAEB;
color: #286ea0;*/
background: #000000;
color: #FFF;
}
...
.menu{
font-family: 9pt Verdana, Geneva, sans-serif;
}
.menu ul{
list-style: none;
margin:0;
padding:0;
width:250px;
}
.menu ul li ul{
/*width:240px;*/
}
.menu ul li{
/*margin:0;
padding:5px;
background-color: #4B4B4B;*/
}
...
.menu ul li ul{
display:none;
}
¿Alguna sugerencia?
Muchas gracias.