Problemas con list-style-type: none;

[ramoncortegoso]

Tengo dos ul que los quiero listar horizontalmente, uno de ellos si me hace el efecto pero el otro no y en realidad no se el porque. Pongo el código y a ver si me podéis decir algo:

Código HTML:

<div class="submenu">
              <div class="mod-social">
                            <ul>
                                <li>
                                    <a class="social social-facebook" href="#"></a>
                                </li>
                                <li>
                                    <a class="social social-twitter" href="#"></a>
                                </li>
                                <li>
                                    <a class="social social-google" href="#"></a>
                                </li>
                                <li>
                                    <a class="social social-vimeo" href="#"></a>
                                </li>
                            </ul>
             </div>
             <div class="mod-languages">
                            <ul>
                                {section name=idioma loop=$idiomas}
                                    <li>
                                        <a href="/index.php?lang={$idiomas[idioma].id}"> 
                                            {$idiomas[idioma].codigo}
                                        </a>
                                    </li>
                                {/section}
                            </ul>
              </div>
</div> 

Este es el css, del codigo HTML

Código:

#cabecera div.submenu ul {
    position:relative;
    list-style: none;
    text-decoration: none;
}
#cabecera div.submenu li {
    display: inline; 
    list-style-type: none;
}
.mod-social{
    height:20%;
}
.social{
    height: 43px;
    display: block;
}
.social-facebook{
    background: url(img/facebook.png) 100% 50% no-repeat;
}
.social-twitter{
    background: url(img/twitter.png)100% 50% no-repeat;
}
.social-google{
    background: url(img/googleplus.png)100% 50% no-repeat;
}
.social-vimeo{
    background: url(img/vimeo.png)100% 50% no-repeat;
}
.submenu li a:hover {
    color:#000;
}

.mod-languages{
    height:20%;
}
.mod-languages li{
    background: url(./img/idioma_sep.png) 100% 50% no-repeat;
    color: #919191;
    font-weight:bold;
    
}

Adjunto una foto para que veáis lo que me hace, quiero poner los iconos de las redes sociales como están las href para los idiomas pero no soy capaz

[pzin]

No entendí bien el problema. ¿Qué es lo que no funciona?

[ramoncortegoso]

En el div mod-social el ul no se lista en horizontalmente sino de manera normal. Yo quiero que los distintos iconos de las redes sociales vayan de izquierda a derecha no de arriba a abajo. En el div mod-languages.

En la imagen se ve de todos modos. (http://imageshack.us/photo/my-images/513/2su3.jpg/)

[pzin]

Es decir, algo así:

Código CSS:

#cabecera div.submenu li {
  display: inline-block;
}
 

Si entendí bien. Ando espeso.