先看看效果:
html代码:
<
html
>
< head >
< style >
ul#menu, ul#menu ul {
list-style : none ;
margin : 0 ;
border-bottom : 1px solid #DDD ;
border-right : 1px solid #DDD ;
border-left : 1px solid #DDD ;
width : 150px ;
padding : 0 ;
font-size : 14px ;
}
ul#menu li {
border-top : 1px solid #DDD ;
position : relative ;
padding : 4px ;
}
ul#menu li ul {
position : absolute ;
left : 150px ;
_left : 144px ;
top : 0 ;
display : none ;
}
ul#menu li.over {
background : #EEE ;
}
ul#menu li.out {
background : #fff ;
}
ul#menu a {
display : block ;
text-decoration : none ;
color : #000 ;
_height : 0 ;
}
style>
<script type="text/javascript">
function initMenu(event,ul){
if(!ul) ul = document.getElementById("menu");
li = ul.getElementsByTagName("li");
for(i=0;i<li.length;i++)
{
li[i].onmouseover = function(){
try{
this.className='over';
this.getElementsByTagName("ul")[0].style.display="block";
}catch(e){};
}
li[i].onmouseout = function(){
try{
this.className='out';
this.getElementsByTagName("ul")[0].style.display="none";
}catch(e){};
}
}
}
window.onload = initMenu;
script>
head>
<body>
<ul id="menu">
<li>
这是菜单1
<ul>
<li>
这是菜单1
<ul>
<li><a href="#">这是子菜单 a> li>
<li>
这是菜单1
<ul>
<li><a href="#">这是子菜单 a> li>
<li><a href="#">这是子菜单 a> li>
<li>
这是菜单1
<ul>
<li><a href="#">这是子菜单 a> li>
<li>
这是菜单1
<ul>
<li><a href="#">这是子菜单 a> li>
<li><a href="#">这是子菜单 a> li>
<li><a href="#">这是子菜单 a> li>
ul>
li>
<li><a href="#">这是子菜单 a> li>
ul>
li>
ul>
li>
<li><a href="#">这是子菜单 a> li>
ul>
li>
<li>
这是菜单1
<ul>
<li><a href="#">这是子菜单 a> li>
<li><a href="#">这是子菜单 a> li>
<li><a href="#">这是子菜单 a> li>
ul>
li>
<li><a href="#">这是子菜单 a> li>
ul>
li>
<li>
这是菜单2
<ul>
<li><a href="#">这是子菜单 a> li>
<li><a href="#">这是子菜单 a> li>
<li><a href="#">这是子菜单 a> li>
ul>
li>
<li>
这是菜单3
<ul>
<li><a href="#">这是子菜单 a> li>
<li><a href="#">这是子菜单 a> li>
<li><a href="#">这是子菜单 a> li>
ul>
li>
ul>
body>
html>
< head >
< style >
ul#menu, ul#menu ul {
list-style : none ;
margin : 0 ;
border-bottom : 1px solid #DDD ;
border-right : 1px solid #DDD ;
border-left : 1px solid #DDD ;
width : 150px ;
padding : 0 ;
font-size : 14px ;
}
ul#menu li {
border-top : 1px solid #DDD ;
position : relative ;
padding : 4px ;
}
ul#menu li ul {
position : absolute ;
left : 150px ;
_left : 144px ;
top : 0 ;
display : none ;
}
ul#menu li.over {
background : #EEE ;
}
ul#menu li.out {
background : #fff ;
}
ul#menu a {
display : block ;
text-decoration : none ;
color : #000 ;
_height : 0 ;
}
style>
<script type="text/javascript">
function initMenu(event,ul){
if(!ul) ul = document.getElementById("menu");
li = ul.getElementsByTagName("li");
for(i=0;i<li.length;i++)
{
li[i].onmouseover = function(){
try{
this.className='over';
this.getElementsByTagName("ul")[0].style.display="block";
}catch(e){};
}
li[i].onmouseout = function(){
try{
this.className='out';
this.getElementsByTagName("ul")[0].style.display="none";
}catch(e){};
}
}
}
window.onload = initMenu;
script>
head>
<body>
<ul id="menu">
<li>
这是菜单1
<ul>
<li>
这是菜单1
<ul>
<li><a href="#">这是子菜单 a> li>
<li>
这是菜单1
<ul>
<li><a href="#">这是子菜单 a> li>
<li><a href="#">这是子菜单 a> li>
<li>
这是菜单1
<ul>
<li><a href="#">这是子菜单 a> li>
<li>
这是菜单1
<ul>
<li><a href="#">这是子菜单 a> li>
<li><a href="#">这是子菜单 a> li>
<li><a href="#">这是子菜单 a> li>
ul>
li>
<li><a href="#">这是子菜单 a> li>
ul>
li>
ul>
li>
<li><a href="#">这是子菜单 a> li>
ul>
li>
<li>
这是菜单1
<ul>
<li><a href="#">这是子菜单 a> li>
<li><a href="#">这是子菜单 a> li>
<li><a href="#">这是子菜单 a> li>
ul>
li>
<li><a href="#">这是子菜单 a> li>
ul>
li>
<li>
这是菜单2
<ul>
<li><a href="#">这是子菜单 a> li>
<li><a href="#">这是子菜单 a> li>
<li><a href="#">这是子菜单 a> li>
ul>
li>
<li>
这是菜单3
<ul>
<li><a href="#">这是子菜单 a> li>
<li><a href="#">这是子菜单 a> li>
<li><a href="#">这是子菜单 a> li>
ul>
li>
ul>
body>
html>