主页
M
html5
JavaScript
DIV+CSS
前端美工
--网页制作--
Java与JSP
PHP
Python 3
Golang
--网络编程--
Mysql
Oracle
NoSQL
SQLite
--数据库--
Linux
正则表达式
架构
--运维--
--网页特效--
--移动开发--
SDN
QUIC
网络原理
--网络--
强化学习
机器学习
--人工智能--
区块链1
区块2
--区块链--
爬虫技术
爬虫案例
--数据采集--
理论
dapp案例
--dapp--
利用CSS的hover伪类实现的下拉菜单效果
2020-05-21
网页编程网
网页编程网
<style> * {margin:0;padding:0;} a {color:#FFF;text-decoration:none;} .top {width:100%;height:42px;background:#BE0028;} .top .nav {margin:0 auto;width:1000px;} .top .nav a {width:80px;height:42px;line-height:42px;text-align:center;display:block;float:left;font-weight:bold;position:relative;} .top .nav a:hover {background:#333;} .top .nav a .box {width:600px;height:240px;background:#333;position:absolute;top:42px;left:-260px;display:none;} .top .nav a:hover .box {display:block;} </style> </head> <body> <div class="top"> <div class="nav"> <a href="">首页</a> <a href="">新闻 <div class="box"></div> </a> <a href="">视频 <div class="box"></div> </a> <a href="">音乐 <div class="box"></div> </a> <a href="">知道 <div class="box"></div> </a> <a href="">购物 <div class="box"></div> </a> <a href="">论坛</a> </div> </div> </body>
阅读原文
阅读
2969
123
显示电脑版