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. Win7如何自定义鼠标右键菜单 添加新建文本文档

    鼠标右键新建文本文档.reg REGEDIT4 [HKEY_CLASSES_ROOT\.txt] @="txtfile" "Content Type"=&quo ...

  2. Openstack nova代码部分凝视一

    做个一个没怎么学过python的菜鸟.看源代码是最好的学习方式了,如今就从nova入手,主要凝视一下 nova/compute/api.py 中的 create_instance函数 def _cre ...

  3. 【秀优越(xie e)】原来出题也能够这么恶心。

    通过邪恶的数据范围和数据限制居然能够把一道传统题出成题答2333. 诶毕竟内部互測,题目就不往上贴了. 特殊限制 - - - 题目作废.输出M行"Orz  PoPoQQQ" - M ...

  4. 每天一个 Linux 命令（57）：ss命令

    ss是Socket Statistics的缩写.顾名思义,ss命令可以用来获取socket统计信息,它可以显示和netstat类似的内容.但ss的优势在于它能够显示更多更详细的有关TCP和连接状态的信 ...

  5. Android日期对话框NumberPicker的使用方法教程

    NumberPicker是Android3.0之后引入的一个控件.NumberPicker 是用于选择一组提前定义好数字的控件.比方时间hour的选择仅仅有0-23有效,则能够通过setMinValu ...

  6. MySQL数据库 常用命令

    1.MySQL常用命令 create database name;创建数据库 use databasename;选择数据库 drop database name 直接删除数据库,不提醒 show ta ...

  7. FZU 2124 FOJ 2124 吃豆人【BFS】

     Problem 2124 吃豆人 Accept: 134    Submit: 575 Time Limit: 1000 mSec    Memory Limit : 32768 KB  Probl ...

  8. Linux内核编译过程分析

    http://pan.baidu.com/s/1mgtACVu 其中是我总结生成的一些文档,以便于理解当我们输入make uImage后,系统是怎么一步一步生成uImage的,我采用的是逆向分析的方法 ...

  9. Intellj IDEA光标替insert状态，back键无法删除内容

    Intellj IDEA光标为insert状态,无法删除内容导入项目后,发现打开java文件的光标是win系统下按了insert键后的那种宽的光标,并且还无法删除内容,且按删除(delete)键也只见 ...

  10. 转载 ---资深HR告诉你：我如何筛选简历与选择人员的

    资深HR告诉你:我如何筛选简历与选择人员的   有个公司HR看简历 先直接丢掉一半 理由是不要运气不好的应聘者. 当然这可能只是某些HR面对太多的简历产生了偷懒的情绪,但是不论是Manager,亦或是 ...