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

Django横向二级导航栏（鼠标悬空事件）相关推荐

经典蓝色横向二级导航栏
[img]http://dl.iteye.com/upload/attachment/0068/2213/3e71ce48-0f17-3af9-aaed-275865688a36.jpg[/img]
CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单）
前言该效果很常见,网上的代码都非常的乱,样式改起来非常难受. 本文提供 "最简洁" 的解决方案与干净整洁的代码,一眼看过去就知道改哪里, 配合 Vue.js 项目非常合适,如下图 ...
Js鼠标悬停事件，简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件
Js鼠标悬停事件,简单的实现导航栏鼠标划过内容弹窗的效果.可读性较高的鼠标悬停事件 <!DOCTYPE html> <html lang="en"> < ...
二级导航栏（html、css)
二级导航栏(html.css) 效果图: 完整代码如下: <!DOCTYPE html> <html lang="en"><head><m ...
layui隐藏侧边栏_layui禁用侧边导航栏点击事件的处理方法
layui是一款优秀的前端模块化css框架.我用layui做过两个完整的项目,对她的感觉就是,这货非常适合做后台管理界面,且基于jquery,很容易上手.当然,她最大的优点我觉得还是她的模块化方式,相 ...
【Web前端二级导航栏】
简单的Web前端二级导航栏示例: <!DOCTYPE html> <html><head><meta charset="utf-8"> ...
layui导航栏鼠标经过青色条块怎么移到顶部？
layui导航栏鼠标经过青色条块怎么移到顶部? layui-nav-bar怎么移到导航栏的顶部? 青色条块其实就是在鼠标经过时会变成,所以,如果我们把top:111px变成top:0,青色条块就可以移 ...
使用css实现二级导航栏
1.今日用css实现二级导航栏,在csdn上看了各种奶妈级的代码,终于倒腾出来了 2.话不多说,上效果图: 3.html代码如下: ```<!DOCTYPE HTML> <html ...
css二级横向导航条,纯CSS实现的横向二级导航菜单(无js兼容性强)
内容介绍热点排行相关文章下载地址↓ 纯CSS实现,无JavaScript,效果不错,实用性强,兼容各种浏览器! 第一步: 下载源代码及背景图片第二步: 在网页区添加样式定义 [code] /* = ...

Django横向二级导航栏（鼠标悬空事件）

Django横向二级导航栏（鼠标悬空事件）相关推荐

最新文章

热门文章