Sous menu horizontal

Fermé
douby67 Messages postés 2 Date d'inscription samedi 23 novembre 2013 Statut Membre Dernière intervention 24 novembre 2013 - 23 nov. 2013 à 21:18
douby67 Messages postés 2 Date d'inscription samedi 23 novembre 2013 Statut Membre Dernière intervention 24 novembre 2013 - 24 nov. 2013 à 10:35
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 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 325
24 nov. 2013 à 01:08
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 Date d'inscription samedi 23 novembre 2013 Statut Membre Dernière intervention 24 novembre 2013
24 nov. 2013 à 10:35
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