您的位置：首页 > Web前端 > CSS

使用css+js构造的无限级菜单（寻梦的稻草人）

2008-04-10 12:01 931 查看

先看看效果：

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css function menu html

相关文章推荐

新的分享

章节导航