Django横向二级导航栏(鼠标悬空事件)

  1 <!DOCTYPE html>
  2 <html lang="en" xmlns="http://www.w3.org/1999/html">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>{% block title %} base模板 {% endblock title%}</title>
  6     <style >
  7         th {color:green}
  8         tbody {color:blue;height:50px}
  9         tfoot {color:red}
 10         
 11         #header{
 12             background-color: black;
 13             color: azure;
 14             text-align: center;
 15             padding: 5px;
 16         }
 17         /*设定整个导航栏样式*/
 18         #nav{
 19             background-color: gainsboro;
 20             height: 12px;
 21             /*width: 200px;*/
 22             color: black;
 23             /*float: left;*/
 24             padding:5px;
 25         }
 26         #nav a,ul{
 27             text-decoration: none;/* 去除下划线*/
 28             margin: 0px;/* 去除前上方留白*/
 29             padding: 0px; /* 去除左方留白*/
 30         }
 31         /*一级导航栏样式*/
 32         #nav ul li{
 33             display: inline-block;
 34         }
 35         /*一级导航栏鼠标悬停样式*/
 36         #nav ul li:hover{
 37             background-color: burlywood;
 38         }
 39         /*绑定一级导航栏与二级导航栏样式*/
 40         #nav ul li:hover ul{
 41             position: absolute;
 42             display: block;
 43         }
 44         /*二级导航栏样式*/
 45         #nav ul li ul{
 46             background-color: whitesmoke;
 47             display: none;/*默认隐藏*/
 48             /*left: 100px;*/
 49             position: relative; /*相对定位,左移100px*/
 50         }
 51         #nav ul li ul li{
 52             display: block;
 53         }
 54         /*二级导航栏鼠标悬停样式*/
 55         #nav ul li ul li:hover{
 56             background-color: gainsboro;
 57 
 58         }
 59         #footer{
 60             background-color: black;
 61             color: azure;
 62             clear: both;
 63             text-align: center;
 64             padding: 5px;
 65         }
 66     </style>
 67     
 68     
 69     
 70 </head>
 71 <body>
 72 <div   id="header">
 73 <h1 >测试工具</h1>
 74 </div>
 75 
 76 <div id="nav">
 77     <ul>
 78         <li><a href="/app1/home">主页</a></li>
 79         <li><a href="/app1/home">主目录1号</a>
 80         <ul>
 81             <li><a href="/app1/policy">子项001</a> </li>
 82             <li><a href="/app1/policy/67">子项002</a></li>
 83         </ul></li>
 84         <li><a href="#">目录2号</a>
 85         <ul>
 86             <li><a href="/app1/policy">11111111111</a> </li>
 87             <li><a href="/app1/policy/67">22222222222</a></li>
 88             <li><a href="/app1/policy/67">33333333333333</a></li>
 89         </ul></li>
 90     </ul>
 91 </div>
 92 {% block content %}
 93 主页
 94 {% endblock content %}
 95 
 96 <div id="footer">
 97     已经没有了
 98 </div>
 99 
100 </body>
101 </html>

结果如下:

转载于:https://www.cnblogs.com/zhangyamei/p/10327677.html

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

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

相关文章

浙江大学计算机学院1702班,测控1702:传道授业解惑 此间师者真情

2017年9月11日晚8:00&#xff0c;电气与信息工程学院测控技术与仪器1702班在德智学生公寓的天台上开展了一场别开生面的班主任见面交流会。测控1702班班主任文一章博士、电气院2017级本科辅导员金晶老师以及测控1702班的同学们参加了此次见面会。测控1702班班主任文一章1991年出…

通过小程序给公众号传递消息_多输入现场消息传递应用程序概念

通过小程序给公众号传递消息by Dawid Woldu戴维德沃尔杜(Dawid Woldu) 多输入现场消息传递应用程序概念 (A multi-input field messaging app concept) Some time ago I shared in a Medium article the idea for context aware messenger app. The idea challenged the desig…

Oracle【IT实验室】数据库备份与恢复之二:SQL*Loader

2.1 基本知识 Oracle 的 SQL* LOADER 可以将外部格式化的文本数据加载到数据库表中。通常 与 SPOOL导出文本数据方法配合使用。 1.命令格式 SQLLDR keywordvalue [&#xff0c;keywordvalue&#xff0c;……] 例&#xff1a;$ sqlldr user/pwd controlemp.ctl dataemp.dat ba…

关于spring 获取不到网站上的xsd的处理记录

2019独角兽企业重金招聘Python工程师标准>>> 前两天做一个项目还好好的&#xff0c;今天突然报出这个错误 cvc-complex-type.2.4.c: The matching wildcard is strict, but no declaration can be found for element mvc:annotation-driven 应该是xml文件找不到相应…

蓝宝石英语怎么读_黑金和蓝宝石

这是一直以后我个人的一个理解误区&#xff0c;或者说是信息误区&#xff0c;就是这两个产品线&#xff0c;差别到底在哪里&#xff1f;以前我一直认为黑金的成分是纯天然的&#xff0c;而蓝宝石有一定的合成物质。这个信息一定是我从哪里读到的&#xff0c;由于无处求证&#…

秘密潜入2小辣椒_短暂潜入2次,我显然不知道自己作为开发人员正在做什么

秘密潜入2小辣椒by Zachary Kuhn扎卡里库恩(Zachary Kuhn) 那两次我显然不知道我作为开发人员正在做什么 (Those two times where I clearly had no clue what I was doing as a developer) Last week I had a short conversation with coworkers about how we had messed up …

提高你的javascript代码逼格系列之函数与数组

不知道大家有没有一种感觉&#xff0c;那就是自己写的javascript代码虽然能完全解决工作上的需要&#xff0c;但是&#xff0c;一眼望去&#xff0c;too simple&#xff01;&#xff01;&#xff01;简直就是一个傻子都能看懂的水平&#xff0c;于是&#xff0c;在工作之余&…

印度评论九章量子计算机,张礼立:中国 “九章”量子计算机到底厉害在哪?...

【背景信息】12月4日&#xff0c;《科学》杂志公布了中国“九章”的重大突破。 这台由中国科学技术大学潘建伟、陆朝阳等学者研制的76个光子的量子计算原型机&#xff0c;推动全球量子计算的前沿研究达到一个新高度。尽管距离实际应用仍有漫漫长路&#xff0c;但成功实现了“量…

手机web网页制作的认识(有关meta标签)

近日以来一直在看JQuery Mobile 一个手机开发框架&#xff0c;说实话真的很头疼的~~~~ 因为里面有很多的属性、方法和事件~~~ 下面是手机网页的一些认识&#xff1a; 一、<meta name"viewport" id"viewport" content"widthdevice-width, initial-s…

包打包和解析过程 unity_Unity学习—资源管理概览

本文介绍了 Unity 常用四种默认路径&#xff0c;以及 AssetDataBase、Resources、AssetBundle 和目前最新的 Addressable 四种资源管理方式文中所有 API 均以版本 2019.3 为准本文原地址&#xff1a;Unity学习—资源管理概览资源路径Application.dataPath官方文档只读&#xff…

graphql tools_声明式GraphQL:编写更少的代码,并使用graphql-tools完成更多工作

graphql toolsI’ve been working with GraphQL for a few months now, but only recently began using Apollo’s graphql-tools library. After learning a few idioms, I am able to mock up a functional API quickly. This is largely due to its low-code, declarative a…

用idea搭建SSM项目,原来这么简单

目录 前言软件环境创建项目数据库文件配置文件pom.xmllog4j.propertiesjdbc.propertiesapplicationContext.xmlspring-mvc.xmlweb.xml运行项目编写代码前言 前阵子突发奇想&#xff0c;想学习下SpringMVC的源码&#xff0c;于是打算用idea搭建一个简易的maven版SSM案例&#xf…

浙江理工大学计算机组成原理试卷,浙江理工大学计算机组成原理设计试题.doc...

计算机组成原理课程设计报告2013/2014第二学期指导教师&#xff1a;许建龙 张芳班级&#xff1a;12计科2班姓名&#xff1a;学号&#xff1a; 计算机组成原理大型实验任务书(计算机12级1、2、3班和实验班)实验目的&#xff1a;深入了解计算机各种指令的执行过程&#xff0c;以及…

mac vagrant 虚拟机nfs挂载点

需求&#xff1a;在mac 上安装了虚拟机&#xff0c;虚拟机系统为centos6.5&#xff0c;现在希望讲虚拟机上点目录通过nfs共享给mac使用 下面主要描述通过nfs共享目录给mac调用的过程 过程参考网址&#xff1a; http://www.moqifei.com/archives/1534 &#xff08;我主要参考的这…

nodejs中require的路径是一个文件夹时发生了什么

node中使用require的时候如果路径是一个文件夹时&#xff0c;或者特殊的情况require(..);require(.); 这是node实战这本书里说的情况&#xff0c;但是我在node6.9版本中发现不完全是这样&#xff0c;可能是后来做了修改。下面说说在6.9下require路径的过程。 这里以require(.)说…

python调用ctypes中windll中的方法超时处理_python中使用ctypes调用MinGW生成的动态链接库(dll)...

关于gcc编译dll的我就不说了&#xff0c;网上举例一大堆&#xff0c;下面以g为例。假设有一个test.cpp文件如下&#xff1a;extern "C" {__declspec(dllexport) double add(double x,double y);}double add(double x,double y){return xy;}在MinGW中使用g编译&#x…

惯用过程模型_惯用的Ruby:编写漂亮的代码

惯用过程模型Ruby is a beautiful programming language.Ruby是一种美丽的编程语言。 According to Ruby’s official web page, Ruby is a:根据Ruby的官方网页&#xff0c;Ruby是&#xff1a; “dynamic, open source programming language with a focus on simplicity and …

采用晶体管为基本元件的计算机发展阶段是,计算机应用基础知识点

第一章 计算机基础知识1、计算机发展阶段第一代&#xff1a;电子管计算机采用电子管为基本元件&#xff0c;设计使用机器语言或汇编语言。要用于科学和工程计算 第二代&#xff1a;晶体管计算机采用晶体管为基本元件&#xff0c;程序设计采用高级语言&#xff0c;出现了操作系统…

springcloud系列三 搭建服务模块

搭建服务模块为了模拟正式开发环境,只是少写了service层直接在controller里面直接引用,直接上图和代码:更为方便: 创建完成之后加入配置: pom.xml文件: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM…

P1801 黑匣子_NOI导刊2010提高(06)

题目描述 Black Box是一种原始的数据库。它可以储存一个整数数组&#xff0c;还有一个特别的变量i。最开始的时候Black Box是空的&#xff0e;而i等于0。这个Black Box要处理一串命令。 命令只有两种&#xff1a; ADD(x):把x元素放进BlackBox; GET:i加1&#xff0c;然后输出Bla…