CSS+HTML+JQuery简单菜单

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/399067.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【研究】Metasploit自动攻击模块

【研究】Metasploit自动攻击模块

环境&#xff1a;kali-linux-2017.3-vm-amd64 一、安装postgresql数据库 apt-get install postgresql apt-get install rubygems libpq-dev apt-get install libreadline-dev apt-get install libssl-dev apt-get install libpq5 apt-get install ruby-dev apt-get install lib…
阅读更多...
用JS获取地址栏参数的方法

用JS获取地址栏参数的方法

用JS获取地址栏参数的方法&#xff08;超级简单&#xff09;方法一&#xff1a;采用正则表达式获取地址栏参数&#xff1a;&#xff08; 强烈推荐&#xff0c;既实用又方便&#xff01;&#xff09; function GetQueryString(name){var reg new RegExp("(^|&)" …
阅读更多...
php curl_init不能用,curl_init（）函数不起作用

php curl_init不能用,curl_init（）函数不起作用

curl_init()函数不起作用嗨&#xff0c;我在POST请求中尝试PHP Post Request&#xff0c;认为它可能对我有用&#xff0c;我的代码如下所示$sub_req_url "http://localhost/index1.php";$ch curl_init($sub_req_url);$encoded ;// include GET as well as POST va…
阅读更多...
php修改session生存时间,修改session的过期(生存)时间

php修改session生存时间,修改session的过期(生存)时间

以下我以php为例&#xff0c;万变不离其宗&#xff0c;希望对大家都有用吧。session与cookie:了解过两者的众所都知道&#xff0c;有些信息保存到cookie&#xff0c;有些出于安全问题就不能直接存到浏览器&#xff0c;这就要用到session了。然而对于浏览器&#xff0c;一般都是…
阅读更多...
让nginx支持thinkphp rewrite模式

让nginx支持thinkphp rewrite模式

为什么80%的码农都做不了架构师&#xff1f;>>> Nginx环境在Nginx低版本中&#xff0c;是不支持PATHINFO的&#xff0c;但是可以通过在Nginx.conf中配置转发规则实现&#xff1a;在nginx配置文件中添加 location / { if (!-e $request_filename) { rewrite ^(…
阅读更多...
WPS怎样设置多级标题（如四级标题）

WPS怎样设置多级标题（如四级标题）

WPS期初&#xff0c;乍一看最多只能设置三级标题。 怎样设置四级以上标题呢&#xff1f; 这里以设置四级标题为例&#xff1a; 点击‘视图’->大纲, 假如&#xff0c;现在2.3.3这一行是三级标题&#xff1a; 在下拉框里选择‘4级’就可以了。 现在可以回到普通页面上&#x…
阅读更多...
tomcat关闭后线程依然运行解决办法

tomcat关闭后线程依然运行解决办法

tomcat关闭后线程依然运行解决办法&#xff0c;设置线程为守护线程 守护线程与非守护线程 最近在看多线程的Timer章节&#xff0c;发现运用到了守护线程&#xff0c;感觉Java的基础知识还是需要补充。 Java分为两种线程&#xff1a;用户线程和守护线程 所谓守护线程是指在程序运…
阅读更多...
一维有限元法matlab,有限元matlab研究.ppt

一维有限元法matlab,有限元matlab研究.ppt

* 有限元方法——介绍 有限元方法是数值求解偏微分方程边值问题的一种方法&#xff0c;此方法首先于20世纪50年代初由工程师提出&#xff0c;并用于求解简单的结构问题。有限元方法是这一种系统的数值方法&#xff0c;并奠定其数学基础&#xff0c;是在60年代中期以冯康先生为代…
阅读更多...
matlab实现主成分分析（遥感图像处理）

matlab实现主成分分析（遥感图像处理）

数据说明&#xff1a;采用的数据源是从别人那里拷的2012年全年的Sea Surface Temperature&#xff08;海标温度&#xff0c;SST&#xff09;数据&#xff0c;一直想找一份比较好的主成分分析数据&#xff0c;也没找到。 Matlab自身有主成分分析的函数princomp&#xff0c;其中返…
阅读更多...
Struts1和Struts2的区别和对比（完整版）（转）

Struts1和Struts2的区别和对比（完整版）（转）

Struts1和Struts2的区别和对比&#xff08;完整版&#xff09;&#xff08;转&#xff09; Struts1和Struts2的区别和对比:Action 类: • Struts1要求Action类继承一个抽象基类。Struts1的一个普遍问题是使用抽象类编程而不是接口&#xff0c;而struts2的Action是接口。 • Str…
阅读更多...
SQL Server中关于跟踪（Trace)那点事

SQL Server中关于跟踪（Trace)那点事

前言 一提到跟踪俩字&#xff0c;很多人想到警匪片中的场景&#xff0c;同样在我们的SQL Server数据库中“跟踪”也是无处不在的&#xff0c;如果我们利用好了跟踪技巧&#xff0c;就可以针对某些特定的场景做定向分析&#xff0c;找出充足的证据来破案。 简单的举几个应用场景…
阅读更多...
php怎么获取用户所在地址,php获取客户端ip及获取ip所在地址

php怎么获取用户所在地址,php获取客户端ip及获取ip所在地址

// 获取ipfunction ip(){if (isset($_SERVER["HTTP_X_FORWARDED_FOR"]))$ip $_SERVER["HTTP_X_FORWARDED_FOR"];else if (isset($_SERVER["HTTP_CLIENT_IP"]))$ip $_SERVER["HTTP_CLIENT_IP"];else$ip $_SERVER["REMOTE_ADDR&…
阅读更多...
linux中的rm 删除命令

linux中的rm 删除命令

1.rm 不仅可以删除目录还可以删除文件-f, --force 强制删除。忽略不存在的文件&#xff0c;不提示确认-i 在删除前需要确认-I 在删除超过三个文件或者递归删除前要求确认。此选项比-i 提 示内容更少&a…
阅读更多...
在Windows上面安装多个Memcached

在Windows上面安装多个Memcached

在Windows上面安装多个Memcached sc create "memcached Server3" start auto binPath "D:\memcached-1.4.4\memcached.exe -d runservice -m 32 -p 22122" DisplayName "memcached Server3" 转载于:https://www.cnblogs.com/stono/p/8092765.ht…
阅读更多...
前端面试

前端面试

1、如何理解js的闭包 2、js的事件冒泡 3、jquery的跨域请求 4、margin和padding的区别 5,、用过哪些前端框架转载于:https://www.cnblogs.com/iwenwen/p/3959677.html
阅读更多...
PHP实现可示化代码

PHP实现可示化代码

PHP是一种服务器端脚本语言&#xff0c;它主要用于开发Web应用程序。虽然PHP本身不提供可视化代码的功能&#xff0c;但你可以使用一些第三方库和工具来实现可视化代码。 以下是一些常用的PHP可视化代码的工具和库&#xff1a; 1. Graphviz&#xff1a;Graphviz是一个开源的可…
阅读更多...
php若$a没定义默认是,PHP之错误处理详解

php若$a没定义默认是,PHP之错误处理详解

PHP之错误处理详解错误报告PHP程序的错误发生一般归属于下列三个领域&#xff1a;1、语法错误语法错误最常见&#xff0c;并且也容易修复。如&#xff1a;代码中遗漏一个分号。这类错误会阻止脚本的执行2、运行时错误这种错误一般不会阻止PHP脚本的执行&#xff0c;但会阻止当前…
阅读更多...
热血沙城－3.2移植-古月－cocos2dx源码

热血沙城－3.2移植-古月－cocos2dx源码

最近发现我去年学习2dx的时候移植过的一个游戏现在被放在网上出售 真是有点想笑 本人比较喜欢武侠风格的游戏&#xff0c;当时9秒开源了热血沙城 本着学习的态度 从2.1.2移植到3.2 用了一周的时间 中间各种报错 大概修改了1000多处错误 同时增加了支持摇杆 后来放到9秒上开源&…
阅读更多...
【openjudge 1.11 07】和为给定数

【openjudge 1.11 07】和为给定数

我看到这个的第一反应就是爆搜&#xff0c;然后写了一个没加$No$的4分程序 #include <bits/stdc.h> #include <algorithm> #define it int #define fr for #define il inline using namespace std; it book[100020],t[100020]; it spe[50010]; it n,m,bz0; it main…
阅读更多...
tcp http socket

tcp http socket

1、TCP连接 手机能够使用联网功能是因为手机底层实现了TCP/IP协议&#xff0c;可以使手机终端通过无线网络建立TCP连接。TCP协议可以对上层网络提供接口&#xff0c;使上层网络数据的传输建立在“无差别”的网络之上。 建立起一个TCP连接需要经过“三次握手”&#xff1a; 第一…
阅读更多...
最新文章

Copyright @ 2022~2023