Member Avatar for dr_copper

Hi, I try to create a menu for the website of my friend. But I have a probleme with the reaction of event. My submenu close when i quit the section div. Someone can help me please?

my code:

<html>
 <head>
  <title>test menu</title>
  <script language="javascript">
  function ouvrir_menu(cible){
   liens_cible="liens"+cible;
   document.getElementById(liens_cible).style.visibility="visible";
  }
  function fermer_menu(cible){
   liens_cible="liens"+cible;
   document.getElementById(liens_cible).style.visibility="hidden";
  }
  </script>
 </head>
 <body>
<div id="menu" style="position:relative;top:50px;width:200px;">

 <div id="section1" style="width:200px;position:absolute;top:0px;background-color:grey;" onMouseOver="ouvrir_menu('1')">
  Section 1
 </div>

 <div id="liens1" style="width:198px;height:40px;position:absolute;top:0px;visibility:hidden;z-index:2;border:1px solid red"  onMouseOut="fermer_menu('1')">
  <div style="position:relative;top:18px;background-color:lightgrey;">
   Lien 1
  </div>
 </div>

</div>
 </body>
</html>
Edited by dr_copper because: n/a
  • 1 Contributor
  • 1 Reply
  • 210 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by dr_copper
Member Avatar for dr_copper

ok i find the probleme in one of div. If that can help someone i post my new code

<html>
 <head>
  <title>test menu</title>
  <script language="javascript">
  function ouvrir_menu(cible){
   liens_cible="liens"+cible;
   document.getElementById(liens_cible).style.visibility="visible";
  }
  function fermer_menu(cible){
   liens_cible="liens"+cible;
   document.getElementById(liens_cible).style.visibility="hidden";
  }
  </script>
 </head>
 <body>
 <div id="menu" style="position:relative;top:0px;width:200px;">

  <div id="section1" style="width:200px;position:relative;background-color:darkgreen;" onMouseOver="ouvrir_menu('1')" onMouseOut="fermer_menu('1')">Section1
   <div id="liens1" style="position:absolute;visibility:hidden;top:18px;z-index:2;">
    <div style="width:200px;background-color:green;">
     Lien1<br>
 	 Lien2<br>
 	 Lien3<br>
 	 Lien4
    </div>
   </div>
  </div>

  <div id="section2" style="width:200px;position:relative;background-color:darkgreen;" onMouseOver="ouvrir_menu('2')" onMouseOut="fermer_menu('2')">Section2
   <div id="liens2" style="position:absolute;visibility:hidden;top:18px;z-index:2;">
    <div style="width:200px;background-color:green;">
     Lien1<br>
 	Lien2<br>
 	Lien3<br>
 	Lien4
    </div>
   </div>
  </div>


  <div id="section3" style="width:200px;position:relative;background-color:darkgreen;" onMouseOver="ouvrir_menu('3')" onMouseOut="fermer_menu('3')">Section3
   <div id="liens3" style="position:absolute;visibility:hidden;top:18px;z-index:2;">
    <div style="width:200px;background-color:green;">
     Lien1<br>
 	Lien2<br>
 	Lien3<br>
 	Lien4
    </div>
   </div>
  </div>

 </div>
 </body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.