Problemas al crear menu horizontal

[Alberto_Mad]

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:

...
<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:

...
#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.

[IsaBelM]

se trata de usar float: left o display: inline-block

#m ul{
list-style: none;
}

#m ul > li{
float: left;
}

<div id="m">
<ul>
<li>opcion1</li>
<li>opcion2</li>
<li>opcion3</li>
<li>opcion4</li>
</ul>
</div>

[Alberto_Mad]

Antes de nada muchas gracias por contestar,

Como puedes ver en el código que he subido esas cosas las he probado (aunq en el código que he subido están comentado) y ni con esas.. no me los pone en una línea sino que me los crea verticalmente.

Si en: #navigacija ul li{} incorporo la línea en el que le digo que el float:left o display:inline-block, siguen sin colocarlo en línea y aparte lo que hace es mantenermelo verticalmente pero sin el formato (espacio entre botones, que todos contengan el mismo tamaño,...)

¿Sabrías que podría hacer?

Muchas gracias.

[IsaBelM]

prueba ahora

#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>

[kseso?]

Los li´s por naturaleza y definición son elementos de bloque.
Consecuencia: ocupan todo el espacio que tengan a su disposición en la horizontal. Consecuencia: fuerzan a posicionarse en la línea de abajo a todo lo que le siga.