<!DOCTYPE html
>
<html
lang=
"en"
>
<head>
<meta
charset=
"UTF-8"
>
<title>Document
</title>
<script
type=
"text/javascript"
>
window.
onload=
function()
{
var
ul=
document.
getElementsByTagName(
"ul")[
0];
//var lis=ul.getElementsByTagName("li");
var
lis=
ul.
children;
//所有的li
lis[
0].
onmouseover=
function()
{
var
cul=
this.
getElementsByTagName(
"ul")[
0];
cul.
style.
display=
"block";
}
lis[
0].
onmouseleave=
function()
{
var
cul=
this.
getElementsByTagName(
"ul")[
0];
cul.
style.
display=
"none";
}
lis[
1].
onmouseover=
function()
{
var
cul=
this.
getElementsByTagName(
"ul")[
0];
cul.
style.
display=
"block";
}
lis[
1].
onmouseleave=
function()
{
var
cul=
this.
getElementsByTagName(
"ul")[
0];
cul.
style.
display=
"none";
}
lis[
2].
onmouseover=
function()
{
var
cul=
this.
getElementsByTagName(
"ul")[
0];
cul.
style.
display=
"block";
}
lis[
2].
onmouseleave=
function()
{
var
cul=
this.
getElementsByTagName(
"ul")[
0];
cul.
style.
display=
"none";
}
}
<
/script>
<style
type=
"text/css"
>
#menu li{
/* float:left; */
background:
blue;
border-right:
solid
white
1px
}
<
/style>
</head>
<body>
<ul
id=
"menu"
style=
"list-style:none;width:500px"
type=
"circle"
>
<li>第一章
<ul
style=
"width:100px;float:none;display:none"
type=
"circle"
>
<li>html基础
</li>
<li>java基础
</li>
</ul>
</li>
<li>第二章
<ul
style=
"list-style:none;width:100px;float:none;display:none"
>
<li>html基础1
</li>
<li>java基础1
</li>
</ul>
</li>
<li>第三章
<ul
style=
"list-style:none;width:100px;float:none;display:none"
>
<li>html基础2
</li>
<li>java基础2
</li>
</ul>
</li>
</ul>
<br/>
</body>
</html>