Menu horizontal déroulant

Fermé

Pooulpe Messages postés 6 Date d'inscription lundi 2 juin 2014 Statut Membre Dernière intervention 12 octobre 2015 - 12 oct. 2015 à 21:50
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 13 oct. 2015 à 14:15

Bonjour,

J'essaye de créer une barre fixe avec un menu horizontal déroulant avec html/css. Pour vous donner une idée, j'essaye de faire quelque chose qui ressemble à la barre du haut du site www.betaseries.com.

Mon html :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style2.css" type="text/css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="topbar">
<li>
<a href="page1.html">Page1</a>
<ul>
<li><a href="souspartI1.html">PageI1</a></li>
<li><a href="souspartI2.html">PageI2</a></li>
</ul>
</li>
<li>
<a href="page2.html">Page2</a>
<ul>
<li><a href="souspartII1.html">PageII1</a></li>
<li><a href="souspartII2.html">PageII2</a></li>
</ul>
</li>
<li>
<a href="page3.html">Page3</a>
<ul>
<li><a href="souspartIII1.html">PageIII1</a></li>
<li><a href="souspartIII2.html">PageIII2</a></li>
</ul>
</li>
</ul>
</body>
</html

et mon css :

body {
margin: 0;
padding: 0;
background: black}

#topbar { /* Liste */
width:1500px;
background-color: #3197D0;
position:fixed;
padding: 15px;
}

#topbar li {
font-family: Lucida;
color:white;
font-size: 16px;
display: inline;
padding-right: 30px;
padding-left: 20px;
float : left;

}

#topbar,#topbar ul {
list-style : none;
line-height : 21px;
text-align : center;
}

#topbar ul li ul li a{
color:black;
background-color: white

}

#topbar a /* Contenu des listes */
{
display: inline;
padding : 0; /* aucune marge intérieure */
color : #fff;
text-decoration : none;
width : 144px;

}

#topbar a a/* Contenu des listes */
{
display: inline;
padding : 0; /* aucune marge intérieure */
color : #BDBDBD;
text-decoration : none;
width : 144px;

}

#topbar li ul /* Sous-listes */

{
display: block;
position: absolute;
width: 144px;
left: -999em; /* pour les cacher */

}

#topbar a:hover /* Lorsque la souris passe sur un des liens */

{

color: #3197D0;
border-radius:5px;
background: #fff; /* ... et au contraire, le fond en blanc */

}

#topbar li:hover ul, #topbar li li:hover ul, #topbar li.sfhover ul, #topbar li li
{

left: auto; /* Repositionnement normal */

}

Je bloque totalement, j'arrive plus à l'ameliorer, donc si vous avez des idées ou des conseils pour que j'avance, n'hésitez pas !
Merci !

A voir également:

Menu horizontal déroulant
Menu déroulant excel - Guide
Excel menu déroulant en cascade - Guide
Menu déroulant google sheet - Accueil - Guide bureautique
Windows 11 menu démarrer classique - Guide
Canon quick menu - Télécharger - Utilitaires

1 réponse

Réponse 1 / 1

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
13 oct. 2015 à 14:15

Salut,

Puisque tu utilises bootstrap, pourquoi ne pas réutiliser les composants qu'il propose ?
https://getbootstrap.com/components/#navbar

Bonne journée

Discussions similaires

Suppression listes déroulantes

Supprimer liste déroulante Excel

Effacer liste déroulante

supprimer une liste déroulante

Supprimer Liste déroulante