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>

转载于:https://www.cnblogs.com/xkzy/p/3951674.html

CSS+HTML+JQuery简单菜单相关推荐

  1. 用css及jQuery实现的精美拉下菜单导航条

    用css及jQuery实现的下拉精美菜单导航, 源代码下载地址:http://download.csdn.net/my html代码: <div class="wrapper" ...

  2. 纯 CSS 中的简单响应式汉堡菜单

    欢迎阅读有关如何创建简单的响应式纯 CSS 汉堡菜单的教程.是的,互联网上有很多其他的汉堡菜单,但其中一些仍然需要使用 Javascript.所以这里是一个纯 CSS 驱动的菜单,而不是一行 Java ...

  3. Java制作二级导航菜单_纯CSS实现超简单的二级下拉导航菜单代码

    本文实例讲述了纯CSS实现超简单的二级下拉导航菜单代码.分享给大家供大家参考.具体如下: 这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且 ...

  4. Html+Css+jQuery悬浮菜单

    Html部分 <!DOCTYPE html> <html>     <head>         <meta charset="utf-8" ...

  5. 《你来画，我来猜》游戏简单实现（html、css、jquery）

    本文主要采用 css html jquery 实现<你来画,我来猜>简单小游戏,运用了 css 的基本常用样式,html基本标签,jquery 的部分语法和部分知识.主要是实现了 css ...

  6. jquery折叠菜单、jquery侧边栏菜单、CSS侧边栏菜单

    jquery折叠菜单.jquery侧边栏菜单.CSS侧边栏菜单 一.Jquery折叠菜单效果 二.jquery侧边栏菜单效果 三.CSS侧边栏菜单效果 先上代码 <!DOCTYPE html&g ...

  7. css和jquery_带有CSS和jQuery的超级简单灯箱

    css和jquery 本教程将向您展示如何创建一个用于处理图像的超简单灯箱,而不是使用具有您永远不会使用的功能的plugin肿插件. 非常适合图像库,作品集等! 步骤1:标记 打开您喜欢的文本编辑器( ...

  8. jquery 下拉菜单 html,方便的CSS和jQuery下拉菜单解决方案

    如果您正在 寻找 一些很酷 的 下拉菜单解决 方案 , 那么这些要 .今天 , 我收集了 一些有用的 CSS和jQuery 下拉菜单 解决 方案 . Creating a pure CSS dropd ...

  9. html+css+js+jquery之常见的的本地存储实现一个简单的todoList项目

    前言 就在几天前,在b站的某博主那里看见了一个面试的模拟,意外看到那个同学有一个todoList的项目 很显然,这个项目就和本次我所要展示的项目代码原理一致,但是界面上我这个就会不太美观. 知识点 本 ...

最新文章

  1. python读文件操作-python文件操作-读写删除复制总结
  2. MongoDB架构图解
  3. ArcGIS Server SOE开发之奇怪异常:
  4. android透明像素效率,android-非透明像素上的ImageView ColorFilter.夹
  5. 云栖专辑 | 阿里开发者们的第11个感悟：拥抱变化，用正确的方法对待工作
  6. golang redis获取所有key_Redis 内存分析神器
  7. linux 下运行 jar包 java.lang.ClassNotFoundException: 解决办法
  8. K8s部署Nexus3管理Docker镜像
  9. frame buffer驱动
  10. python英文文本情感分析_sentimentpy模块进行中文文本情感分类
  11. 中国中老年服装市场投资前景分析及供需格局研究预测报告
  12. ELK高级搜索四之Mapping映射和分词器
  13. 开发钉钉和企业微信微应用
  14. Gym - 101853E E. Maximum Sum (状压DP)
  15. webbench源码阅读
  16. pcntl_alarm()的示例
  17. C/C++实现三角函数的方法
  18. app store服务器网站,app store 游戏服务器
  19. 人肉搜索受害者可法律维权
  20. Geek 强力卸载工具，注册表,缓存,垃圾数据全清,免安装

热门文章

  1. python importlib_importlib --- import 的实现 — Python 3.10.0a2 文档
  2. cacheinterceptor第二次访问没被调用_访问者设计模式在OSG中的应用
  3. leetcode 700. 二叉搜索树中的搜索 思考分析
  4. 纠错码trick和数据压缩trick
  5. c中将数组传递给子函数_在C ++中将对象传递给Non-Member函数
  6. 编写一个程序，实现将存放在AX和DX中的32位数据循环右移二进制数的4位。（DX存放高字节内容，AX存放低字节内容）
  7. 网页服务器和mysql服务器_实现Web服务器之间使用同一个MYSQL和相同的网页配置文件的方法...
  8. 内存泄漏Valgrind
  9. Linux系统编程之进程控制（进程创建，fork函数，进程中止，进程等待，程序替换）
  10. 【计算机系统设计】学习笔记（1）03，04