Home>

Relative positioning is used here,But the effect is ok,Trim it again when you use it,This just implements the approximate function,Many details remain untouched.

The screenshot of the running effect is as follows:

The online demo address is as follows:

The specific code is as follows:

<html>
<head>
<title>non-targeting css + js drop-down menu</title>
<style>
#menu {
  position:absolute;
  font-family:sans-serif;
  font-size:9pt;
}
#menu li {
  float:left;
  list-style-type:none;
  width:102px;
  background-color:skyblue;
  border:1px solid #0066cc;
  text-indent:0px;
  margin-left:3px;
}
#menu li a {
  color:blue;
  text-decoration:none;
  width:100%;
  display:block;
}
#menu li a:hover {
  color:white;
}
#menu li ul {
  background-color:skyblue;
  margin:0px;
  padding:0px;
}
#menu li ul li {
  padding:0px;
  margin:0px;
  float:none;
  list-style-type:none;
  width:100px;
  text-indent:0px;
  border:none;
}
#menu li ul li a {
  color:black;
  text-decoration:none;
}
#menu li ul li a:hover {
  color:black;
  background-color:aqua;
}</style>
<script language="javascript" type="text/javascript">
var t=false, current;
function setupmenu () {
  if (! document.getelementsbytagname) return;
  items=document.getelementsbytagname ("li");
  for (i=0;i<items.length;i ++) {
   if (items [i] .classname!="menu") continue;
   thelink=findchild (items [i], "a");
   thelink.onmouseover=showmenu;
   thelink.onmouseout=starttimer;
   if (ul=findchild (items [i], "ul")) {
     ul.style.display="none";
     for (j=0;j<ul.childnodes.length;j ++) {
      ul.childnodes [j] .onmouseover=resettimer;
      ul.childnodes [j] .onmouseout=starttimer;
     }
   }
  }
}
function findchild (obj, tag) {
  cn=obj.childnodes;
  for (k=0;k<cn.length;k ++) {
   if (cn [k] .nodename == tag) return cn [k];
  }
  return false;
}
function showmenu (e) {
  if (! e) var e=window.event;
  thislink=(e.target)?e.target:e.srcelement;
  resettimer ();
  if (current) hidemenu (current);
  thislink=thislink.parentnode;
  current=thislink;
  ul=findchild (thislink, "ul");
  if (! ul) return;
  ul.style.display="block";
}
function hidemenu (thelink) {
  ul=findchild (thelink, "ul");
  if (! ul) return;
  ul.style.display="none";
}
function resettimer () {
  if (t) window.cleartimeout (t);
}
function starttimer () {
  t=window.settimeout ("hidemenu (current)", 200);
}
window.onload=setupmenu;
</script>
</head>
<body>
<h1>menu test</h1>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">products</a>
  <ul>
  <li><a href="#">sub-item 1</a></li>
  <li><a href="#">sub-item 2</a></li>
  </ul>
</li>
<li><a href="#">support</a>
  <ul>
  <li><a href="#">sub-item 1</a></li>
  <li><a href="#">sub-item 2</a></li>
  </ul>
</li>
<li><a href="#">employment</a>
  <ul>
  <li><a href="#">sub-item 1</a></li>
  <li><a href="#">sub-item 2</a></li>
  </ul>
</li>
<li><a href="#">contact us</a>
  <ul>
  <li><a href="#">sub-item 1</a></li>
  <li><a href="#">sub-item 2</a></li>
  </ul>
</li>
</ul>
</body>
</html>
  • Previous Java get network type method
  • Next Detailed interpretation of character-oriented input streams in Java programming