1. [代码]style

<style type="text/css">
    body,ul,li,a{
        margin:0;
        padding:0
    }
     
    ul,li{
        list-style-type:none
    }
 
    .menu{
        width:270px;
        height:30px;
        line-height:30px;
        background:#0f67a1
    }
     
    .menu li{
        width:80px;
        float:left;
        display:inline;
        position:relative;
        z-index:10;
        text-align:center/*一级栏内容居中*/
    }
         
    .menu li:hover{
        background:#426d9c;             
    }
         
    .menu .menuUl{
        width:50px;
        height:auto;
        display:none;
        background:#426d9c;
        position:absolute;
        z-index:20;
        left:25px;
        top:30px
    }
         
    .menuUl li{
        width:100%;
        float:left;
        text-align:left;
    }   
                 
    a{
        color:#eee;
        text-decoration: none
    }
     
    a:hover{
        color:#000;
        text-decoration: none
    }
</style>
2. [代码]script

<script type="text/javascript">       
    $(document).ready(function(){
        $(".menu li").hover(
            function(){
                $(this).find(".menuUl").show('50');
            },
            function(){
                $(this).find(".menuUl").hide('50');
            }
        );
    })
</script>
3. [代码]body

<body>
    <ul class="menu">
        <li>
            <a href="">1</a>
            <ul class="menuUl">
                <li><a href="" >1</a></li>
                <li><a href="" >2</a></li>
                <li><a href="" >3</a></li>
                <li><a href="" >4</a></li>
            </ul>
        </li>
        <li>
            <a href="">1</a>
            <ul class="menuUl">
                <li><a href="" >1</a></li>
                <li><a href="" >2</a></li>
                <li><a href="" >3</a></li>
                <li><a href="" >4</a></li>
            </ul>
        </li>         
    </ul>
     
</body>
4. [文件] jquery-1.7.2.min.js ~ 93KB     下载(29)     
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>http://www.huiyi8.com/dongman/weimei/​
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link type="text/css" href="css/main.css" rel="stylesheet" />
        <script type="text/javascript" src="js/vendor/jquery-1.7.2.js"></script>
        <script type="text/javascript">       
            $(document).ready(function(){
                $(".menu li").hover(
                    function(){
                        $(this).find(".menuUl").show('50');
                    },
                    function(){
                        $(this).find(".menuUl").hide('50');
                    }
                );
            })
        </script>
 
        <style type="text/css">
            body,ul,li,a{
                margin:0;
                padding:0
            }
             
            ul,li{
                list-style-type:none
            }
 
            .menu{
                width:270px;
                height:30px;
                line-height:30px;
                background:#0f67a1
            }
             
            .menu li{
                width:80px;
                float:left;
                display:inline;
                position:relative;
                z-index:10;
                text-align:center/*一级栏内容居中*/
            }
                 
            .menu li:hover{
                background:#426d9c;             
            }
                 
            .menu .menuUl{
                width:50px;
                height:auto;
                display:none;
                background:#426d9c;
                position:absolute;
                z-index:20;
                left:25px;
                top:30px
            }
                 
            .menuUl li{
                width:100%;
                float:left;
                text-align:left;
            }   
                         
            a{
                color:#eee;
                text-decoration: none
            }
             
            a:hover{
                color:#000;
                text-decoration: none
            }
        </style>
    </head>
     
    <body>
        <ul class="menu">
            <li>
                <a href="">1</a>
                <ul class="menuUl">
                    <li><a href="" >1</a></li>
                    <li><a href="" >2</a></li>
                    <li><a href="" >3</a></li>
                    <li><a href="" >4</a></li>
                </ul>
            </li>
            <li>
                <a href="">1</a>
                <ul class="menuUl">
                    <li><a href="" >1</a></li>
                    <li><a href="" >2</a></li>
                    <li><a href="" >3</a></li>
                    <li><a href="" >4</a></li>
                </ul>
            </li>         
        </ul>
         
    </body>
</html>

CSS+HTML+JQuery简单菜单的更多相关文章

  1. jQuery简单的手风琴菜单

    查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...

  2. Smint – 用于单页网站制作的 jQuery 导航菜单插件

    Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...

  3. 几款jQuery右键菜单插件介绍

    在网页中使用自定义右键菜单,实现上皆为使用javascript禁用浏览器默认的右键菜单,然后在网页中响应鼠标右键事件,弹出自定义的菜单. 类似右键菜单的组件网上很多.一般而言,改变浏览器的默认菜单应当 ...

  4. css与jquery、图标字体

    *)还能这样选择 header #search input[type="text"] *)按钮常用颜色:#008cBA(字母大小写没有区别) *)清除浮动后,text-align没 ...

  5. jquery右键菜单

    点击这里体验效果 如果要屏蔽页面原来的右键菜单,请设置disable_native_context_menu:true 以下是源代码: <!DOCTYPE html> <html&g ...

  6. 使用CSS和jQuery实现tab页

    使用jquery来操作DOM是极大的方便和简单,这儿只是简单的用一个使用css和jquery来实现的tab页来简单介绍一些jQuery的一些方便使用的方法,下面是html文件: <!DOCTYP ...

  7. jQuery实现菜单点击隐藏（上下左右）

    canrun <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  8. jQuery简单实例

    jQuery 选择器 $(this).hide() 演示 jQuery 的 hide() 函数,隐藏当前的 HTML 元素. $("p").hide() 演示 jQuery 的 h ...

  9. jquery 简单弹出层(转)

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...

随机推荐

  1. 如何用openssl命令行生成证书

    老大要我在web server里面加上https功能,可是但就使用openssl生成证书就耗费了我两天时间,网上有很多相关的资料,但是都写的很复杂, 照着他们的来,还是走了很多弯路. 我总结一下,步骤 ...

  2. Qt4.8.5配置相关问题

    空余时间想看看Qt,在安装和编译过程中遇到了一些值得记录的东西,总结一下. (一)安装 1.先安装编译环境qt-creator-win-opensource-3.0.0.exe.使用默认路径C:\Qt ...

  3. debian jessie install note

    Debian支持非常多的硬件,包括arm/mips/ppc/x86,于是想安装个Debian看看,也不想总屈服在canonical的ubuntu下面. 光盘镜像太多了 纯社区版的安装总是没有想像得那么 ...

  4. 配置Spring的用于解决懒加载问题的过滤器

    <?xml version="1.0" encoding="UTF-8"?><web-app version="2.5" ...

  5. python学习（十一）函数、作用域、参数

    定义和调用函数 在这里函数的定义和调用和一般的语句没什么不一样,感觉函数也是对象 #!/usr/bin/python def times(x, y):                # 定义函数    ...

  6. Hadoop关于Wrong FS错误

    关于使用java api上传文件. 在定义一个FileSystem变量的时候伪分布式和单机版的方法是不一样的,单机版使用的是FileSystem类的静态函数 FileSystem hdfs = Fil ...

  7. 解决php网页运行超时问题:Maximum execution time of 30 seconds exceeded

    Fatal error: Maximum execution time of 30 seconds exceeded in C:\Inetpub\wwwroot\ry.php on line 11 意 ...

  8. 小鬼PSer

    我是小鬼PSer,主要修图和做网站的,有需要可以call QQ:1805843351 微信:1805843351

  9. mongodb distinct去重

    MongoDB的destinct命令是获取特定字段中不同值列表.该命令适用于普通字段,数组字段和数组内嵌文档. mongodb的distinct的语句: db.users.distinct('last ...

  10. Maven中央仓库地址（实用版）

    最近做项目的时候,一直发现常用的oschina maven源一直都没有反应,后面发现原来oschina竟然关闭了maven源服务,后面经同事推荐了阿里云的maven源,这速度杠杠的 Maven 中央仓 ...