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à .
Merci Cabot, j"ai une super base de départ là, j'ai commencé en local, et ça me plait bien tout ça.
