css|js| Menu
First look at the effect:
HTML code:
<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>
<body>
<ul id= "Menu" >
<li>
This is menu 1.
<ul>
<li>
This is menu 1.
<ul>
<li><a href= "#" > This is submenu </a></li>
<li>
This is menu 1.
<ul>
<li><a href= "#" > This is submenu </a></li>
<li><a href= "#" > This is submenu </a></li>
<li>
This is menu 1.
<ul>
<li><a href= "#" > This is submenu </a></li>
<li>
This is menu 1.
<ul>
<li><a href= "#" > This is submenu </a></li>
<li><a href= "#" > This is submenu </a></li>
<li><a href= "#" > This is submenu </a></li>
</ul>
</li>
<li><a href= "#" > This is submenu </a></li>
</ul>
</li>
</ul>
</li>
<li><a href= "#" > This is submenu </a></li>
</ul>
</li>
<li>
This is menu 1.
<ul>
<li><a href= "#" > This is submenu </a></li>
<li><a href= "#" > This is submenu </a></li>
<li><a href= "#" > This is submenu </a></li>
</ul>
</li>
<li><a href= "#" > This is submenu </a></li>
</ul>
</li>
<li>
This is menu 2.
<ul>
<li><a href= "#" > This is submenu </a></li>
<li><a href= "#" > This is submenu </a></li>
<li><a href= "#" > This is submenu </a></li>
</ul>
</li>
<li>
This is menu 3.
<ul>
<li><a href= "#" > This is submenu </a></li>
<li><a href= "#" > This is submenu </a></li>
<li><a href= "#" > This is submenu </a></li>
</ul>
</li>
</ul>
</body>
