导读：操作步骤/方法1新建html文档。2书写hmtl代码。3<vclass="header">4<divclass="top-bar">5这里是头部6</div>7<divclass="nav-bar">8<divclass="nav-bg">9<divcl...
操作步骤/方法
1
新建html文档。
2
书写hmtl代码。
3
<vclass="header">
4
<divclass="top-bar">
5
这里是头部
6
</div>
7
<divclass="nav-bar">
8
<divclass="nav-bg">
9
<divclass="nav-top">
10
<divclass="nav-content">
11
<ulclass="nav-content-box">
12
<liclass="indexon">
13
<span><ahref="#">首页</a></span>
14
</li>
15
<liclass="cat">
16
<span><ahref="#">分类</a></span>
17
<ul>
18
<li><ahref="#">自然</a></li>
19
<li><ahref="#">文化</a></li>
20
<li><ahref="#">地理</a></li>
21
<li><ahref="#">历史</a></li>
22
<li><ahref="#">生活</a></li>
23
<li><ahref="#">社会</a></li>
24
<li><ahref="#">艺术</a></li>
25
<li><ahref="#">人物</a></li>
26
<li><ahref="#">经济</a></li>
27
<li><ahref="#">科技</a></li>
28
<li><ahref="#">体育</a></li>
29
</ul>
30
</li>
31
<liclass="special">
32
<span><ahref="#">特色百科</a></span>
33
<ul>
34
<li><ahref="#">历史上的今天</a></li>
35
<li><ahref="#">数字博物馆</a></li>
36
<li><ahref="#">城市百科</a></li>
37
<li><ahref="#">高校百科</a></li>
38
<li><ahref="#">艺术百科</a></li>
39
<li><ahref="#">科学百科</a></li>
40
</ul>
41
</li>
42
<liclass="user">
43
<span><ahref="#">用户</a></span>
44
<ul>
45
<li><ahref="#">蝌蚪团</a></li>
46
<li><ahref="#">燃梦计划</a></li>
47
<li><ahref="#">百科任务</a></li>
48
<li><ahref="#">百科商城</a></li>
49
</ul>
50
</li>
51
<liclass="cooperation">
52
<span><ahref="#">权威合作</a></span>
53
<ul>
54
<li><ahref="#">合作模式</a></li>
55
<li><ahref="#">常见问题</a></li>
56
<li><ahref="#">联系方式</a></li>
57
</ul>
58
</li>
59
<liclass="mobile">
60
<span><ahref="#">手机百科</a></span>
61
<ul>
62
<li><ahref="#">客户端</a></li>
63
<li><ahref="#">网页版</a></li>
64
</ul>
65
</li>
66
</ul>
67
</div>
68
</div>
69
</div>
70
</div>
71
</div>
72
初始化css代码。
73
<style>
74
body{margin:0;padng:0;font-family:arial,tahoma,'MicrosoftYahei','5b8b4f53',sans-serif;;}
75
.top-bar{background-color:#f3f3f3;text-align:center;padding:2.5em;}
76
a{padding-bottom:3px;color:white;text-decoration:none;}
77
ul{list-style:none;padding:0;margin:0;}
78
li{text-align:center;}
79
</style>
80
书写css代码。
81
.nav-bar{position:relative;z-index:1000;overflow:hidden;min-width:900px;height:45px;}
82
.nav-bar:hover{overflow:visible;-webkit-transition:all0.5sease;transition:all0.5sease;}
83
.nav-bg{position:absolute;width:100%;height:272px;background:#24619c;background:rgba(36,97,158,.95);-webkit-transition:.3s;transition:.3s;z-index:9999;}
84
.nav-top{height:43px;border-top:1pxsolid#5895d5;border-bottom:1pxsolid#3b92e9;background:#459df5;}
85
.nav-content{position:absolute;width:80%;left:10%;}
86
.nav-content-box{position:absolute;top:0;left:0;width:100%;}
87
.nav-content-box>li{float:left;line-height:43px;}
88
.nav-content-box>li:hover{background:#19508b;}
89
.nav-content-box>li>span>a{splay:block;width:100%;margin:0;height:41px;line-height:41px;}
90
.nav-content-box>li:hover>span>a{background:#338ce6;}
91
ul>li.index,ul>li.cat,ul>li.special,ul>li.user,ul>li.cooperation,ul>li.mobile{width:120px;}
92
ul>li.index{height:43px;}
93
ul.nav-content-box>li>ul{border-right:solid1px#3a6fa2;margin:10px06px}
94
ul.nav-content-box>li>ul:after{visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0}
95
.nav-content-box>li:hover>ul{border-right:none;padding-right:1px;}
96
ul.nav-content-box>li>ul>li{float:left;width:100%;line-height:2;text-align:center;}
97
ul.nav-content-box>li.cat>ul>li{width:49%;}
98
ul.nav-content-box>li>ul>li>a{display:block;width:100%;}
99
代码整体结构。
100
查看效果。
END
以上就是小编为大家介绍的纯CSS实现导航下拉菜单代码的全部内容，如果大家还对相关的内容感兴趣，请持续关注上海建站网！
标签：
内容声明：网站所展示的内容均由第三方用户投稿提供，内容的真实性、准确性和合法性均由发布用户负责。上海建站网对此不承担任何相关连带责任。上海建站网遵循相关法律法规严格审核相关关内容，如您发现页面有任何违法或侵权信息，欢迎向网站举报并提供有效线索，我们将认真核查、及时处理。感谢您的参与和支持！
