Bonjour,

Je cherche à faire un menu déroulant intégré au menu header du haut. J'ai essayé ce code :

CSS :

Code: Tout sélectionner

/* Menu-Top link Option -------------------------*/ .menu-link { border-bottom: 4px solid rgba(234, 8, 8, 0.72); border-radius: 7px 7px 7px 7px; margin: 0; padding: 5px 10px; background-color: rgba(11, 20, 234, 0.75); } .menu-link ul { list-style-type: none; } .menu-link li { display: inline-block; padding: 0 15px; } .menu-link a { color: #cccaca; font-size: 1.2em; font-weight: bold; text-decoration: none; transition: all 0.5s ease 0s; } .menu-link a:hover { color: #fff; text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff; border-bottom: 4px solid #fe8207; padding: 10px 0; } .menu-link ul:after { clear: both; content: ""; display: block; } .menu-link .rightside { float: none; } .menu-link .rightside img { vertical-align: middle; } .menu-link ul li ul { display:none; } .menu-link ul li:hover ul { display:block; } .menu-link li:hover ul li { float:none; } .menu-link li ul { position:absolute; }

HTML :

Code: Tout sélectionner

<!-- EVENT overall_header_body_before --> <div id="wrap"> <a id="top" class="anchor" accesskey="t"></a> <div id="page-header"> <!-- Menu top --> <div class="menu-link"> <ul> <li><a href="http://www.team-gtr3.fr">Accueil</a></li> <li><a href="http://www.team-gtr3.fr/index.php">Forum</a></li> <li><a href="#">Galerie</a></li> <li><a href="http://www.team-gtr3.fr/page/Hebdo">L'hebdo</a></li> <li><a href="http://www.team-gtr3.fr/page/TV">Live TV GTR3</a> <ul> <li><a href="#">Sous-item 1</a></li> <li><a href="#">Sous-item 2</a></li> <li><a href="#">Sous-item 3</a></li> </ul> </li> <li class="rightside"><a href="https://www.facebook.com/groups/698683070278400/" target="_blank"><img src="/images/facebook.png" title="La Team GTR3 sur Facebook" alt=""></a></li> <li class="rightside"><a href="https://www.youtube.com/channel/UCyj3zhN1HOti5OKkcElvcTA" target="_blank"><img src="/images/youtube.png" title="La Team GTR3 sur Youtube" alt=""></a></li> <li class="rightside"><a href="http://steamcommunity.com/groups/Team_GTR3#" target="_blank"><img src="/images/steam.png" title="La Team GTR3 sur Steam" alt=""></a></li> </ul> </div> <!-- End menu top -->

Je test actuellement en local, mais le résultat n'est pas là, ça manque d'espace et le sous menu déroulant ne s'affiche pas vers le bas.

Mon site (mais je n'ai pas fais les modifs dessus mais en local) : http://www.team-gtr3.fr/

Auriez vous des conseils à me donner ? , je suis un peu largué là .

Hello,

Ajoute une classe sur l'élément de liste qui contient le sous-menu :

Code: Tout sélectionner

<li class="sousmenu"><a href="http://www.team-gtr3.fr/page/TV">Live TV GTR3</a>

Remplace ton code CSS par celui-ci :

Code: Tout sélectionner

/* Menu-Top link Option -------------------------*/ .menu-link { border-bottom: 4px solid rgba(234, 8, 8, 0.72); border-radius: 7px 7px 7px 7px; margin: 0; padding: 5px 10px; background-color: rgba(11, 20, 234, 0.75); } .menu-link ul { list-style-type: none; } .menu-link li { display: inline-block; padding: 0 15px; } .menu-link a { color: #cccaca; font-size: 1.2em; font-weight: bold; text-decoration: none; transition: all 0.5s ease 0s; } .menu-link a:hover { color: #fff; text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff; border-bottom: 4px solid #fe8207; padding: 10px 0; } /* Liens steam/youtube/facebook */ .menu-link .rightside { float: right; } .menu-link .rightside img { vertical-align: middle; } /* Sous-menu */ .sousmenu > a:after { content: '\25BC'; font-size: 10px; padding-left: 2px; } .sousmenu:hover > a:after { font-size: 12px; } .sousmenu ul { background-color: #474CEE; display: none; position: absolute; } .sousmenu:hover ul { display: block; } .sousmenu ul li { display: block; padding: 12px; }

Génial Merci Cabot, j"ai une super base de départ là, j'ai commencé en local, et ça me plait bien tout ça.

Maintenant il va falloir que j'essais de comprendre un peu, car j'ai pas fini de vous embêter. J'aimerai rajouter des sous/sous menu mais qui parte sur la droite ...

HideShow

• par Beaware » 26 Fév 2016 à 19:10
• par Beaware » 26 Fév 2016 à 19:16

Salut ,

Le fait de poster deux messages à la suite, sans réponse d'un autre membre entre deux, dans un délai de moins de 24 heures est considéré comme une relance de sujet (UP) sur phpBB-fr.

De ce fait, si tu souhaites éviter que ton sujet soit verrouillé je te prie de respecter les règles qui interdisent les relances de sujet (UP) en moins de 24 heures.

Ton complément d'information était à ajouter à ton précédent message grâce au bouton "Modifier".

Voir le point 1.3.3 de nos conditions générales d'utilisation

@+