jquery导航

最新推荐文章于 2024-06-11 09:49:39 发布

guozh91

最新推荐文章于 2024-06-11 09:49:39 发布

阅读量373

点赞数

文章标签： jquery function border float server html

本文链接：https://blog.csdn.net/guozh90/article/details/7346634

版权

<html xmlns=" http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>仿微软</title>
    <style type="text/css">
    #nav, #nav ul{
     margin:0;
     padding:0;
     list-style-type:none;
     list-style-position:outside;
     position:relative;
     line-height:1.5em;
}
#nav a:link, #nav a:active, #nav a:visited{
    display:block;
    padding:0px 5px;
    border:1px solid #CCC;
    color:#fff;
    text-decoration:none;
    background-color:#CCC;
}
#nav a:hover{/*鼠标移上去*/
    background-color:red;
    color:black;
}
#nav li{
    float:left;
    position:relative;
    border:1px solid yellow;
}
#nav ul {
    position:absolute;
    width:5em;
    top:1.5em;
    display:none;
}
#nav li ul a{
    width:5em;
    float:left;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
    left:5em;
    margin:0px 0 0 10px;
    }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
    }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
    }
    </style>
    <script src="Jquery1.7.js" type="text/javascript" />
    <script type="text/javascript">
        function mainmenu() {
            $('#nav ul').css({ 'display': 'none' });
            $('#nav li').hover(function () {
                $(this).find('ul:first').css({ ' visibility': 'visible', display: 'none' }).show(400);
            }, function () {
                $(this).find('ul:first').css({ visibility: 'hidden' });
            });
        }
        $(document).ready(function () {
            mainmenu();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <ul id="nav">
        <li><a href="#">菜单1</a>
            <ul>
                <li><a href="#">java</a></li>
                <li><a href="#">.net</a></li>
                <li><a href="#">3g</a></li>
            </ul>
        </li>
        <li><a href="#">菜单2</a>
            <ul>
                <li><a href="#">数学</a></li>
                <li><a href="#">语文</a></li>
                <li><a href="#">英语</a></li>
            </ul>
        </li>
        <li><a href="#">菜单3</a>
            <ul>
                <li><a href="#">html</a>
                    <ul>
                        <li><a href="#">1.html</a></li>
                        <li><a href="#">2.html</a></li>
                    </ul>
                </li>
                <li><a href="#">css</a></li>
                <li><a href="#">javascript</a></li>
            </ul>
        </li>
        <li><a href="#">菜单4</a>
            <ul>
                <li><a href="#">哈哈</a></li>
                <li><a href="#">嘿嘿</a></li>
                <li><a href="#">呵呵</a></li>
            </ul>
        </li>
    </ul>
    </form>
</body>
</html>