Problème création menu déroulant au survol/bootstrap

:salut:

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 :

Code:

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>

Malheureusement pas de résultat ....

Il y'aurait t'il une ou des âmes charitables pour m'aider ? :help:

:merci: par avance

PS: Ci-dessous mon code HTML complet + CSS

-------------------------------------------------------------------------------------------------------------------------------------------------
- HTML ----------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------

Code:

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:

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 }