#navigacija {
/* con clear y float decimos donde queremos que si situen, por ejemplo al lado izquierdo de una imagen entonces pondríamos left*/
width: 500px;
margin: 0 0 10px 0;
padding: 0;
font: 9pt Arial, Verdana, Sans-Serif;
}
#navigacija div#linkMenu > ul {
list-style: none;
width: auto;
margin: 3px 0 3px 0;
padding: 0;
font: 9pt Arial, Verdana, Sans-Serif;
/*display:inline;*/
}
#navigacija div#linkMenu > ul > li {
float: left;
}
/* 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:500px;
}
.menu ul li ul{
/*width:240px;*/
}
.menu ul li{
/*margin:0;
padding:5px;
background-color: #4B4B4B;*/
}
.menu ul{
display:none;
}
<div id="navigacija">
<div id="linkMenu">
<ul>
<li><a href=" index.php">Inicio</a></li>
<li><a href="#">Productos</a></li>
<div class="menu">
<ul>
<li><a href="sofas.php">Sofas</a></li>
<li><a href="butacas.php">Butacas</a></li>
<li><a href="sillas.php">Sillas</a></li>
</ul>
</div>
<li><a href="#" onClick="pregfrec();">Preguntas frecuentes</a></li>
<li><a href=" index.php">Ofertas</a></li>
<li><a href="#" onClick="contacto();">Contacto</a></li>
</ul>
</div>
</div>