Je cherche à créer un sous-menu déroulant depuis la première puce de mon menu principal. Après renseignement, j'ai cru comprendre qu'il fallait utiliser le code suivant :
Malheureusement pas de résultat ....
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 <nav class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="index.html" class="dropdown-toggle" data-toggle="dropdown">La gastronomie</a> <ul class="dropdown-menu"> <li><a href="#">Submenu1</a></li> <li><a href="#">Submenu2</a></li> <li><a href="#">Submenu3</a></li> </ul> </li> <li><a href="#">Le shopping</a></li> <li><a href="#">Les sorties</a></li> <li><a href="#">Les événements</a></li> <li><a href="#">Se déplacer</a></li> </ul> </nav>
Il y'aurait t'il une ou des âmes charitables pour m'aider ?
par avance
PS: Ci-dessous mon code HTML complet + CSS
-------------------------------------------------------------------------------------------------------------------------------------------------
- HTML ----------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43 <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>J'adore Montpellier</title> <link href="css/stylesheet.css" rel="stylesheet" type="text/css"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> </head> <body> <header> <div class="container"> <div class="row"> <nav class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav"> <li class="dropdown" id="food"> <a href="index.html" class="dropdown-toggle" data-toggle="dropdown">La gastronomie</a> <ul class="dropdown-menu"> <li><a href="#">Submenu1</a></li> <li><a href="#">Submenu2</a></li> <li><a href="#">Submenu3</a></li> </ul> </li> <li id="shopping"><a href="index.html">Le shopping</a></li> <li id="sorties"><a href="index.html">Les sorties</a></li> <li id="events"><a href="index.html">Les évênements</a></li> <li id="moove"><a href="index.html">Se déplacer</a></li> </ul> </nav> </div> </div> </header> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
- CSS ------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 nav li { background-color:#000000; background-position: center; background-repeat: no-repeat; text-align:center; font-size: 22px } nav li + li a::before { content: "|"; float: left; width: 2px; height: 30px; color: #FFFFFF } #food { width: 234px; background-image: url(img/hover_food_i.png) } #shopping { width: 233px; background-image: url(img/hover_shopping_i.png) } #sorties { width: 233px; background-image: url(img/hover_sorties_i.png) } #events { width: 234px; background-image: url(img/hover_events_i.png) } #moove { width: 234px; background-image: url(img/hover_moove_i.png) } #food a, #shopping a, #sorties a, #events a, #moove a { background-color: #E8E8E8; transition: background 0.5s } #food a:hover, #shopping a:hover, #sorties a:hover, #events a:hover, #moove a:hover { font-size: 0px; background: transparent; transition: background 0s }
Partager