I have a page with menu. But I want in one menu a mulitple dropdown, but it doesn’t work. Can you help me
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<!--<meta http-equiv="refresh" content="0; URL=constructie.html" /> Dit veranderen als pagina's online mogen-->
<title>Webmenu Survival</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type= "text/css">
<!--
/* @group Blink */
#blink {
-webkit-animation: blink .75s linear infinite;
-moz-animation: blink .75s linear infinite;
-ms-animation: blink .75s linear infinite;
-o-animation: blink .75s linear infinite;
animation: blink .75s linear infinite;
}
@-webkit-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
50.01% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-moz-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
50.01% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-ms-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
50.01% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-o-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
50.01% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
50.01% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* @end */
-->
</style>
<style type="text/css">
body {background-color: yellow;
}
.image {background:url(banner.jpg) no-repeat;
background-position:center;
height:100px;
}
.image .text {position:relative;
top:10px;
left:10px;
color:white;
text-align: center;
}
ul {padding:0;
margin:0;
list-style-type:none;}
a {text-decoration:none;
color:white;
background-color:purple;
border-right:1px solid white;}
ul{
margin:0;
padding:0;
}
li{
display:inline;
list-style-type:none;
}
a.glidebutton{
display: inline-block;
position: relative;
color: #4A4A4A; /* default color */
background: #ececec; /* default bg color */
text-decoration: none;
font: bold 14px Arial; /* font settings */
letter-spacing: 2px; /* font settings */
overflow: hidden;
height: 30px; /* height of each button */
text-align: center;
border-radius: 5px; /* border radius */
-moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a.glidebutton > span:first-child{ /* first span inside button */
position: relative;
display: block;
height: 100%;
padding: 6px; /* padding of button */
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a.glidebutton > span:first-child:after{ /* CSS generated content */
content: attr(data-text); /* Duplicate text of span markup */
display: block;
width: 100%;
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: inherit;
position: absolute;
top:100%;
left:0;
}
a.glidebutton:hover{
color: black; /* color of button on hover */
background: #72cb47; /* bg color of button on hover */
box-shadow: 0 0 4px green inset;
}
a.glidebutton:hover > span:first-child{
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
/* Menustructuur */
#MenuPlaats li {float:left;
list-style:none;
width:135px;
margin:40px ;
}
/*Opmaak menu structuur */
#MenuPlaats li a {display:block;
padding: 0px 5px 5px 5px;
margin: 0px;
color: white;
background-color:navy;
text-decoration: :underline;
margin-top:-0.15cm;}
#MenuPlaats li ul {display: none;}
/* Uitlijnen van submenu onder menu */
#MenuPlaats li:hover ul, #MenuPlaats li.hover ul {display: block;
position: absolute;
/*Absolute: Blijft staan, en komt onder volgende menu
Relative: Vergroot menu bovenaan, zodat alles uitgelijnd blijft */
margin: 0px 0px 0px -4px;}
/* Selecteert volledige submenu onderdeel, en niet alleen tekst */
#MenuPlaats li:hover li, #MenuPlaats li.hover li {float: none;
display:block;
margin: 2px 0px 0px -1px;
padding: 1px 0px 1px 5px;
}
/* Over het menu worden onderdeel submenu achtergond: blauw en wit, geen onderlijning */
#MenuPlaats li:hover li a, #MenuPlaats li.hover li a {background-color: navy;
border-bottom: 1px solid yellow;
color: white;
text-decoration: none; }
/* Over het submenu, wordt deze geel */
#MenuPlaats li li a:hover {background-color:#FFE271;
color:black;
font-weight:900;
border-style: outset;}
#MenuPlaats li a:hover{background-color:#5F94DC;}
div.clear {clear:both;}
/* Multiple dropdown */
ul ul ul {
left: 100%;
top: 0;
background: #999;
}
li ul li:hover {display: show ;
}
</style>
</head>
<body>
<div class="image">
<div class="text">
<h1>Survival KWB Evergem</h1>
<h3> Je moet het eens meemaken, je leest er meer over op de volgende pagina's'</h3>
</div>
</div>
<div id="MenuPlaats">
<ul>
<li><center><a class="glidebutton" href="Homepage.html" target="inhoud"> <span data-text="Startpagina">Startpagina</span></a> </center> </li>
<li>
<center><a class="glidebutton" href="Informatie.html" target="inhoud"><span data-text="Informatie" />Informatie</a> </center>
<ul>
<li><a href=""> Grafiek <span class="c"></span> </a>
<ul>
<li> <a href="">Bargrafiek </a></li>
<li> <a href="">Lijngrafiek </a></li>
</ul>
</li>
</ul>
<!-- <li> <a href="http://doodle.com/poll/fqmq2an3w5ztcmpf" target="_blank"> Survival 2018 </a></li> -->
<!-- <li> <a href="http://doodle.com/poll/icmztk7s73mtkk72" target="_blank"> Datum Kaasavond 2017 </a></li> -->
<!-- <li> <a href="kaas.html" target="inhoud"> Plannetje zaal kaasavond</a> </li> -->
<!-- <li> <a href="uit01-2017.pdf" target="_blank"> Uitnodiging survival</a> </li> -->
<!-- <li> <a href="SchrijfIn.html" target="inhoud"> Schrijf nu in .. </a> <li> -->
<!-- <li> <a href="comingsoon.html" target="inhoud"> Schrijf nu in .. </a> </li> -->
<!-- <li> <a href="Weerbericht.html" target="inhoud"><div id="blink"> Weerbericht </div> </a> </li> -->
</li>
<li> <center> <a class="glidebutton"><span data-text="Foto's"/> Foto's </a></center>
<ul>
<li> <a href="https://picasaweb.google.com/103565167018609529959/Survival2006?authkey=Gv1sRgCMXIrPP94ZqWtgE" target="_blank"> 2006 </a></li>
<li> <a href="https://picasaweb.google.com/103565167018609529959/Survival2007?authkey=Gv1sRgCP7kkMr3hs6L0AE" target="_blank"> 2007 </a></li>
<li> <a href="https://picasaweb.google.com/103565167018609529959/Survival2008?authkey=Gv1sRgCI6d6oDp09OgzQE" target="_blank"> 2008 </a></li>
<li> <a href="https://picasaweb.google.com/103565167018609529959/Survival2009?authkey=Gv1sRgCODxpZHxp6T-Yg" target="_blank"> 2009 </a></li>
<li> <a href="https://picasaweb.google.com/103565167018609529959/Survival2010?authkey=Gv1sRgCNuN8qro7u_8_wE" target="_blank"> 2010 </a></li>
<li> <a href="https://picasaweb.google.com/103565167018609529959/Survival2011?authkey=Gv1sRgCNPsp5rfw6zvbw" target="_blank"> 2011 </a></li>
<li> <a href="https://picasaweb.google.com/103565167018609529959/Survival2012?authkey=Gv1sRgCMjf7qeDi4XpxgE" target="_blank"> 2012 </a></li>
<li> <a href="https://picasaweb.google.com/103565167018609529959/Survival2013?authkey=Gv1sRgCJmbruG1xtquPw" target="_blank"> 2013 </a></li>
<li> <a href="https://picasaweb.google.com/103565167018609529959/Survival2014?authkey=Gv1sRgCLv_noPE-4fryAE" target="_blank"> 2014</a></li>
<li> <a href="https://get.google.com/albumarchive/103565167018609529959/album/AF1QipN8eRAMsOIXofqXGoCqAOvX1eHGr7alrCFk-qY7?authKey=CKLJtLTJ4fiVDQ" target="_blank"> 2015 </a></li>
<li> <a href="https://get.google.com/albumarchive/103565167018609529959/album/AF1QipMc0CNnv1bO0JK3wbYZYDFduMDjKhFGAYULXQig?authKey=CNT4osT_ls7_EA" target="_blank"> 2016 </a></li>
<li> <a href="comingsoon.html" target="inhoud"> 2017 </a></li>
</ul>
</li>
<li><center><a class="glidebutton"> <span data-text="Overzicht"/>Overzicht </a></center>
<ul>
<li> <a href="Over2006.html" target="inhoud" > 2006 </a> </li>
<li> <a href="Over2007.html" target="inhoud" > 2007 </a> </li>
<li> <a href="Over2008.html" target="inhoud" > 2008 </a> </li>
<li> <a href="Over2009.html" target="inhoud" > 2009 </a> </li>
<li> <a href="Over2010.html" target="inhoud" > 2010 </a> </li>
<li> <a href="Over2011.html" target="inhoud" > 2011 </a> </li>
<li> <a href="Over2012.html" target="inhoud" > 2012 </a> </li>
<li> <a href="Over2013.html" target="inhoud" > 2013 </a> </li>
<li> <a href="Over2014.html" target="inhoud" > 2014 </a> </li>
<li> <a href="Over2015.html" target="inhoud" > 2015 </a> </li>
<li> <a href="Over2016.html" target="inhoud" > 2016 </a> </li>
<li> <a href="Over2017.html" target="inhoud" > 2017 </a> </li>
<!-- <li> <a href="constructie.html" target="inhoud" > 2018 </a> </li> -->
</ul>
</li>
<li><center><a class="glidebutton" href="history.html" target="inhoud"><span data-text="Geschiedenis"/>Geschiedenis</a></center> </li>
<li><center><a class="glidebutton" href="contact.html" target="inhoud"><span data-text="Contact"/>Contact</a></center> </li>
<li><center><a class="glidebutton" href="http://survival.gastenboek.nl" target="inhoud"><span data-text="Gastenboek"/>Gastenboek</a></center></li>
</ul>
</div>
<div class="clear">
<iframe src="Homepage.html" style="width:95%; height:670px; " marginheight="5" frameborder="0" scrolling="auto" marginwidth="5" name="inhoud"></iframe>
<!--<iframe src="constructie.html" style="width:95%; height:670px; " marginheight="5" frameborder="0" scrolling="auto" marginwidth="5"> -->
</div>
<script type="text/javascript" src="http://counter6.allfreecounter.com/private/counter.js?c=d1d66bd24609620182e7128fffed5a02"></script>
<br/>
</body>
</html>