CSS下拉菜单

lihua2915

浏览: 786452 次
性别:
来自: 上海

最近访客更多访客>>

13916109998

sqsgalaxys

soyomo

tuyinbo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html脚本

CSS JavaScript XHTML HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />  
    <title>JavaScript下拉菜单</title>  
    <style type="text/css">  
        * {   
            padding:0;    
            margin:0;   
        }   
        body {   
            font-family:verdana, sans-serif;    
            font-size:small;   
        }   
        #navigation, #navigation li ul {   
            list-style-type:none;   
        }   
        #navigation {   
            margin:20px;   
        }   
        #navigation li {   
            float:left;   
            text-align:center;   
            position:relative;   
        }   
        #navigation li a:link, #navigation li a:visited {   
            display:block;    
            text-decoration:none;    
            color:#000;    
            width:120px;    
            height:40px;    
            line-height:40px;    
            border:1px solid #fff;    
            border-width:1px 1px 0 0;    
            background:#c5dbf2;    
            padding-left:10px;    
        }   
        #navigation li a:hover {   
            color:#fff;   
            background:#2687eb;   
        }   
        #navigation li ul li a:hover {   
            color:#fff;   
            background:#6b839c;    
        }   
        #navigation li ul {   
            display:none;   
            position:absolute;    
            top:40px;   
            left:0;   
            margin-top:1px;   
            width:120px;   
        }   
        #navigation li ul li ul {   
            display:none;   
            position:absolute;    
            top:0px;   
            left:130px;    
            margin-top:0;   
            margin-left:1px;   
            width:120px;   
        }   
    </style>  
    <script type="text/javascript">  
        function displaySubMenu(li)   
    {   
            var subMenu = li.getElementsByTagName("ul")[0];   
            subMenu.style.display = "block";   
        }   
        function hideSubMenu(li)   
    {   
            var subMenu = li.getElementsByTagName("ul")[0];   
            subMenu.style.display = "none";   
        }   
    </script>  
</head>  
<body>  
    <ul id="navigation">  
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">  
            <a href="#">栏目1</a>       
            <ul>  
                <li><a href="http://atf.99bill.com">栏目1->菜单1</a></li>  
                <li><a href="#">栏目1->菜单2</a></li>  
                <li><a href="#">栏目1->菜单3</a></li>  
                <li><a href="#">栏目1->菜单4</a></li>  
            </ul>  
        </li>  
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">  
            <a href="#">栏目2</a>       
            <ul>  
                <li><a href="#">栏目2->菜单1</a></li>  
                <li><a href="#">栏目2->菜单2</a></li>  
                <li><a href="#">栏目2->菜单3</a></li>  
                <li><a href="#">栏目2->菜单4</a></li>  
                <li><a href="#">栏目2->菜单5</a></li>  
            </ul>  
        </li>  
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">  
            <a href="#">栏目3</a>       
            <ul>  
                <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">  
                    <a href="#">栏目3->菜单1</a>  
                    <ul>  
                        <li><a href="http://www.google.com">菜单1->子菜单1</a></li>  
                        <li><a href="#">菜单1->子菜单2</a></li>  
                        <li><a href="#">菜单1->子菜单3</a></li>  
                        <li><a href="#">菜单1->子菜单4</a></li>  
                    </ul>  
                </li>  
                <li><a href="#">栏目3->菜单2</a></li>  
                <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">  
                    <a href="#">栏目3->菜单3</a>  
                    <ul>  
                        <li><a href="#">菜单3->子菜单1</a></li>  
                        <li><a href="#">菜单3->子菜单2</a></li>  
                        <li><a href="#">菜单3->子菜单3</a></li>  
                    </ul>  
                </li>  
            </ul>  
        </li>  
    </ul>  
</body>  
</html>

y下拉菜單.rar (2 KB)
下载次数: 16

下拉菜單.rar (1.1 KB)
下载次数: 16

分享到：

EL表达式 | 用JS获得地址栏上的参数值

2009-11-11 11:57
浏览 1063
评论(0)
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS下拉菜单

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS下拉菜单

评论

发表评论

相关推荐

10个 DIV+CSS 需要注意的问题

常用代码

常用js函数

鼠标点按钮，把文本框里的值输入到表格，表格美化

可以拖动的表格

手动在页面添加值到下拉列表而不刷新的demo

javascript 参数传递 文本框

js设置页面背景色,设置背景图片

css 表格 table

禁止网页上的鼠标，键盘事件

JavaScript 函数

在html文件引入其它html文件的几种方法

div浮动在select上

CSS自动黄行

GIF进度条

http错误代码含义

Window.Open详解

javascript调用父窗口（父页面）的方法

js窗口&提示大全

window.open，自动打开新窗口并且自动关闭新窗口，可以作为增加点击率使用

最近访客更多访客>>

javascript 参数传递文本框