ul,li实现顶级栏目

最新推荐文章于 2021-04-09 11:07:44 发布

willeager

最新推荐文章于 2021-04-09 11:07:44 发布

阅读量116

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： JavaScript XHTML HTML ViewUI

本文链接：https://blog.youkuaiyun.com/willeager/article/details/83839329

html 专栏收录该内容

5 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{
    margin:0;
    padding:0;
}

body{
    background-color:#FFF;
}

#page{
    margin:0 auto;
    width:960px;
    height:600px;
    background-color: #E6E6E6;
}

#header{
    height:50px;
}

#main{
    height:550px;
    background-color:#C2C2C2;
}

#ful li{
    float:left;
    padding:0 10px;
    height:50px;
    list-style-type:none;
    position:relative;
}

#ful li ul{
    position:absolute;
    left:0;
    top:50px;
    background-color:#FFBFFF;
}

#ful li ul li{
    padding:0;
    margin:0;
    display:block;
    height:20px;
   
    float:none;
   
}

</style>

<script type="text/javascript">
function showUL(vid){
    document.getElementById(vid).style.display='block';
}
function hideUL(vid){
    document.getElementById(vid).style.display='none';
}
</script>
</head>

<body>
<div id="page">
<div id="header">
<ul id='ful'>
    <li onmouseover="showUL('userli');" onmouseout="hideUL('userli');"><a href="#">Users</a>
        <ul id="userli" style="display:none">
            <li style="width:30px;" onmouseover="showUL('floor1');" onmouseout="hideUL('floor1');">aaa
                <ul id="floor1" style="position:absolute;left:30px;top:0px;display:noen;">
                    <li>++++++</li>
                    <li>-------</li>
                </ul>
            </li>
            <li>bbb</li>
        </ul>   
    </li>
    <li onmouseover="showUL('menuli');" onmouseout="hideUL('menuli');">Menus
        <ul id="menuli" style="display:none">
            <li>123456</li>
            <li>456789123123123123</li>
        </ul>
    </li>
   
</ul>
</div>
<div id="main"></div>
</div>
</body>
</html>