Sous menu horizontal

douby67 Messages postés 2 Statut Membre -  
douby67 Messages postés 2 Statut Membre -
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>
A voir également:

2 réponses

elgazar Messages postés 6069 Statut Membre 1 328
 
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
douby67 Messages postés 2 Statut Membre
 
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