Django横向二级导航栏（鼠标悬空事件）
生活随笔
收集整理的這篇文章主要介紹了
Django横向二级导航栏（鼠标悬空事件）
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
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 /*設(shè)定整個(gè)導(dǎo)航欄樣式*/
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 /*一級(jí)導(dǎo)航欄樣式*/
32 #nav ul li{
33 display: inline-block;
34 }
35 /*一級(jí)導(dǎo)航欄鼠標(biāo)懸停樣式*/
36 #nav ul li:hover{
37 background-color: burlywood;
38 }
39 /*綁定一級(jí)導(dǎo)航欄與二級(jí)導(dǎo)航欄樣式*/
40 #nav ul li:hover ul{
41 position: absolute;
42 display: block;
43 }
44 /*二級(jí)導(dǎo)航欄樣式*/
45 #nav ul li ul{
46 background-color: whitesmoke;
47 display: none;/*默認(rèn)隱藏*/
48 /*left: 100px;*/
49 position: relative; /*相對(duì)定位，左移100px*/
50 }
51 #nav ul li ul li{
52 display: block;
53 }
54 /*二級(jí)導(dǎo)航欄鼠標(biāo)懸停樣式*/
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 >測(cè)試工具</h1>
74 </div>
75
76 <div id="nav">
77 <ul>
78 <li><a href="/app1/home">主頁(yè)</a></li>
79 <li><a href="/app1/home">主目錄1號(hào)</a>
80 <ul>
81 <li><a href="/app1/policy">子項(xiàng)001</a> </li>
82 <li><a href="/app1/policy/67">子項(xiàng)002</a></li>
83 </ul></li>
84 <li><a href="#">目錄2號(hào)</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 主頁(yè)
94 {% endblock content %}
95
96 <div id="footer">
97 已經(jīng)沒(méi)有了
98 </div>
99
100 </body>
101 </html>
結(jié)果如下：
轉(zhuǎn)載于:https://www.cnblogs.com/zhangyamei/p/10327677.html
總結(jié)
以上是生活随笔為你收集整理的Django横向二级导航栏（鼠标悬空事件）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 做梦梦到离婚了是什么意思
- 下一篇： 用idea搭建SSM项目，原来这么简单