Bonjour tout le monde je viens demander votre aide car sa fait depuis quelque temps que j'essaye de faire mon menu déroulant tout marche bien mais le problème est que je n'arrive pas a le faire passer au dessus du texte quelqu'un pourrait m'aider SVP
voici les code :
code html les lettres bizares c'est fait exprès ne vous inquiéter pas lool
:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<link rel="stylesheet" rev="stylesheet" href="../script/OK1.css" />
<script language="javascript" type="text/javascript" src="../script/OK1.js">
</script>
</head>
<body>
<!-- Banièrre du site !-->
<img src="#" width="100%" /><!-- Je choisi 100% pour avoir ma banière extensible!-->
<!-- ________________________________________________________________________________________________________________ !-->
<!--Menu déroulant code en javascript et css !-->
<div>
<a href="menu1.html" class="menuLink">sfsdfa>
<ul class="menu" id="menu1">
<li><a href="pg1.html">dfdsdgsg</a></li>
<li><a href="pg2.html">gdgdfhh</a></li>
</ul>
</div>
<div>
<a href="menu2.html" class="menuLink">hdfhgfh</a>
<ul class="menu" id="menu2">
<li><a href="pg3.html">hfgjfjgjfg</a></li>
<li><a href="pg4.html">jfgfjkfkh</a></li>
<li><a href="pg5.html">khgkkllllhkjh</a></li>
<li><a href="pg6.html">sfsdgdshsh</a></li>
<li><a href="pg7.html">fhhjuj</a></li>
<li><a href="pg8.html">gjgfdfjfjh</a></li>
</ul>
</div>
<div>
<a href="menu3.html" class="menuLink">jghjhg</a>
<ul class="menu" id="menu3">
<li><a href="pg9.html">gjghjghj</a></li>
<li><a href="pg10.html">ghjgh ghjgjg</a></li>
<li><a href="pg11.html">jgjgjuykk</a></li>
<li><a href="pg12.html">fhfhhhhhfg</a></li>
</ul>
</div>
<div>
<a href="menu4.html" class="menuLink">fhfghghghghf</a>
<ul class="menu" id="menu4">
<li><a href="pag.html">fhfhfhfha></li>
<li><a href="pg14.html">fhfghfhfgh</a></li>
<li><a href="pg15.html">hfhfhfhf</a></li>
<li><a href="pg16.html">ffjgkfk</a></li>
<li><a href="pg17.html">Fgfffffffffffff</a></li>
</ul>
</div>
<!--__________________________________________________________________________________________________________________________________________________!-->
<div id="corps">
<h1>Bonjour dans ara</h1>
<p>Braxbc,,v,b;jk;hvvvvvvvvvvvvv;;;hhgjhggfffhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbgggggggggggggg
eeeeeeeeeeertttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
MERCI A TOUS POUR VOTRE AIDE</p>
</div>
</body>
</html>
code css:
body {
background-color: #aae0a1;
color: black;
}
div {
margin-bottom: 10px;
margin-top : 0.30%;
width: 24.85%;
background-color: rgb(83, 228,52);
float : left;
text-align: center;
border: 1px solid black;
display: block;
z-index: 99;
}
ul.menu {
list-style-type: none;
margin-top: 2px;
padding: 0;
display: none;position: absolute;
border-top: 1px solid black;
}
ul.menu li {
font: 12px Comic Sans Ms, arial, helvetica, sans-serif;
padding-left: 10px;
}
a.menuLink, li a {
text-decoration: none;
color: #060;
}
a.menuLink {
font: 20px Comic Sans Ms, arial, helvetica, sans-serif;
font-weight: bold;
}
li a:hover {
background-color: #060;
color: white;
}
#corps
{
width: 100%;
font : 14px Comic Sans MS, Arial, Sans-Sherif;
border: 1px solid black;
text-align: left;
margin-top: 0.30px;
}
#corps h1
{
text-align: center;
text-decoration: underline;
color: #3f9230;
}
img
{
border: solid black 1px;
}
#tab_alpha td
{
text-align: center;
width: 0.24%;
}
code javascript :
window.onload = initAll;
function initAll() {
var allLinks = document.getElementsByTagName("a");
for (var i=0; i<allLinks.length; i++) {
if (allLinks[i].className.indexOf("menuLink") > -1) {
allLinks[i].onclick = function() {return false;}
allLinks[i].onmouseover = toggleMenu;
}
}
}
function toggleMenu() {
var startMenu = this.href.lastIndexOf("/")+1;
var stopMenu = this.href.lastIndexOf(".");
var thisMenuName = this.href.substring(startMenu,stopMenu);
document.getElementById(thisMenuName).style.display = "block";
this.parentNode.className = thisMenuName;
this.parentNode.onmouseout = toggleDivOff;
this.parentNode.onmouseover = toggleDivOn;
}
function toggleDivOn() {
document.getElementById(this.className).style.display = "block";
}
function toggleDivOff() {
document.getElementById(this.className).style.display = "none";
}