Sous menu horizontal

j'ai un petit soucis, je cherche à faire un sous menu horizontal. J'ai suivi un tuto sur le net et j'ai voulu modifier le code mais sans succès. Comment puis je faire pour modifier mes sous menu qui s'affichent en vertical pour être horizontal?

voici le code utilisé


div#menu {
font: 11px verdana, sans-serif;
background:url("http://dungeon-rpg.com/test-pic/shining/shining.jpg") no-repeat scroll center top #FFFFFF;;
margin: 0 ;
padding: 0;
height: 100px;
}

#menu
{
width:520px;
height: auto;
list-style-type: none;
margin: 0 auto;
padding: 0;
border: 0;

}
#menu > li
{
float: left;
width: 120px;
margin: 5px;
padding: 0;
border: 0;
}
#menu li a
{
display: block;
color: #FFFFFF;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
margin: 0;
padding: 4px 8px;
height: 120px;
border:1px solid #FFFFFF;
text-decoration: none;

}

#menu li a:hover {
background-color: rgb(175, 214, 1);
background-color: rgba(175, 214, 1, 0.5);
}

#menu .menuderoulant
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menu .menuderoulant li
{
margin: 0;
padding: 0;
border: 0;
width: 120px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menu .menuderoulant li a
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background-color:rgb(0, 0, 0);
background-color:rgba(0,0,0,0.5);

}
#menu .menuderoulant li a:hover
{
background-color: rgb(18, 89, 239);
background-color: rgba(18, 89, 239, 0.8);

}

#menu .menuderoulant li a:visited {
background-color:rgb(227, 22, 30);
background-color:rgba(227, 22, 30, 0.5);
}

#menu li:hover > .menuderoulant { display: block; }

<div id="menu">
<ul id="menu">

<li>

<a href="#1">Sony</a>

<ul class="menuderoulant">

<li><a href="http://dungeon-rpg.com/?page_id=326">Playstation</a></li>
<li><a href="http://dungeon-rpg.com/playstation-2/">Playstation 2</a></li>
<li><a href="http://dungeon-rpg.com/playstation-3/">Playstation 3</a></li>
<li><a href="http://dungeon-rpg.com/ps-vita/">PS vita</a></li>
<li><a href="http://dungeon-rpg.com/psp/">PSP</a></li>
</ul>

</li>

<li>

<a href="#5">Sega</a>

<ul class="menuderoulant">
<li><a href="http://dungeon-rpg.com/dreamcast/">Dreamcast</a></li>
<li><a href="http://dungeon-rpg.com/megadrive/">Megadrive</a></li>
<li><a href="http://dungeon-rpg.com/saturn/">Saturn</a></li>

</ul>

</li>

<li>

<a href="#21">Nintendo</a>

<ul class="menuderoulant">

<li><a href="http://dungeon-rpg.com/game-boy/">Gameboy</a></li>
<li><a href="http://dungeon-rpg.com/game-boy-advance/">Gameboy advance</a></li>
<li><a href="http://dungeon-rpg.com/280-2/">Gameboy color</a></li>
<li><a href="http://dungeon-rpg.com/gamecube/">Gamecube</a></li>
<li><a href="http://dungeon-rpg.com/nintendo-3ds/">Nintendo 3DS</a></li>
<li><a href="http://dungeon-rpg.com/nintendo-64/">Nintendo 64</a></li>
<li><a href="http://dungeon-rpg.com/ds/">Nintendo DS</a></li>
<li><a href="http://dungeon-rpg.com/nes/">Nintendo NES</a></li>
<li><a href="http://dungeon-rpg.com/super-nintendo/">Super Nintendo</a></li>
<li><a href="http://dungeon-rpg.com/wii/">Wii</a></li>
<li><a href="http://dungeon-rpg.com/wii-u/">Wii U</a></li>
</ul>

</li>

<li>

<a href="#22">Divers</a>

<ul class="menuderoulant">

<li><a href="http://dungeon-rpg.com/cd-i-2/">CD-i</a></li>
<li><a href="http://dungeon-rpg.com/n-gage/">N-Gage</a></li>
<li><a href="http://dungeon-rpg.com/multi-supports/">Multi supports</a></li>
<li><a href="http://dungeon-rpg.com/pc-windows/">PC windows</a></li>
<li><a href="http://dungeon-rpg.com/wonderswan/">Wonderswan</a></li>
<li><a href="http://dungeon-rpg.com/374-2/">Xbox</a></li>
<li><a href="http://dungeon-rpg.com/xbox-360/">Xbox 360</a></li>

</ul>

</li>
</ul>
</div>

2 réponses

  1. J'avais déjà tenter le inline sans succès, je suppose que j'ai un conflit avec mon thème wordpress.. Est ce possible?
    0
    1. avec display:inline dans menu .menuderoulant li a si c'est ton sous menu

      quelque chose comme ca devrait marcher

      menuderoulant li a{
      display : inline;
      padding : 0 0.5em; écart entre les liens
      text-decoration: none;
      background-color:rgb(0, 0, 0);
      background-color:rgba(0,0,0,0.5);
      }
      0