`
willeager
  • 浏览: 92929 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

ul,li实现顶级栏目

    博客分类：
  • html
JavaScriptXHTMLHTML 
阅读更多 
<!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>
 
分享到：
| PHP 中的SQL注入
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics