CSS实现鼠标悬浮时下拉菜单栏功能

个人学习笔记，欢迎评论，虚心接受批评和建议。

效果图：

下拉效果：

实现要点：
菜单内容：无序列表，居中
菜单定位：relative absolute（子元素li要根据菜单实现相对定位，父元素ul必须要实现任意定位（position））
菜单背景：设置白色背景
下拉效果：ul设置display：none，鼠标悬浮设置ul{display:block}，li设置悬浮背景颜色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0px;margin: 0px;}ul{list-style: none;}#menu{width: 90px;height: 20px;margin: 20px auto;border: black solid 1px;position: relative;background-color: white;text-align: center;}#menu ul{width: 90px;border:black 1px solid;position: absolute;left: -1px;top: 20px;background-color: white;display: none;}#content{text-align: center;}#menu:hover ul{display: block;}#menu ul li:hover{background-color: grey;}</style>
</head>
<body><div id="menu">菜单<ul><li>菜单一</li><li>菜单二</li><li>菜单三</li><li>菜单四</li></ul></div><p id="content">段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试</p>
</body>
</html>

CSS实现鼠标悬浮时下拉菜单栏功能相关推荐

html鼠标滑过导航条展开导航条,jquery css实现鼠标滑过导航菜单栏动画效果
对于导航栏的实现对于前端人员来说再简单不过了,但是如何让我们的导航看起来生动,给用户一种很高大上的感觉,却需要我们好好设计一下.今天我给大家带来的是我自己在项目中用到的一个例子,当我们鼠标滑过导航栏时 ...
HTML CSS 的鼠标悬浮，点击的样式
HTML CSS 的鼠标悬浮,点击等样式的编写 (以 a 便签为例子) 当鼠标悬浮时:a:hover <style>a:hover{font-size:19px;color:#000000 ...
纯css实现鼠标悬浮、点击更改元素背景
一.使用方案 css伪类 active:元素被点击时变色,点击后颜色消失 focus:元素被点击后变色,点击后颜色不消失 hover:鼠标悬浮时变色,移除后颜色消失二.代码 template部分代码 ...
【前端】html+css实现鼠标悬浮变色的按钮，消除加粗边框发生抖动现象的两种方法 hover【HTML+CSS+JavaScript(JS)】
效果: 代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
CSS实现鼠标悬浮时背景图片拉近且增加遮罩层效果
效果预览点击查看效果我们在浏览网站时会发现有一些图片在鼠标悬浮在上时会有放大拉近的效果. 想要实现这个效果有两种方法,第一种方法是控制背景图片,第二种方法是控制插入的图片,我们这里介绍第一 ...
HTML+CSS制作鼠标悬浮上去可以放大的照片墙?
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
css 实现鼠标悬浮时等比放大图片,鼠标移出时还原图片
实现思想,将图片外层放一个隐形的div容器,图片小比div容器要小, div容器的大小要大于图片放大的尺寸,css 可要自行调整大小这样当图片放大时,就不会影响页面的其他元素,因为它只在隐形的div容 ...
css创建鼠标悬停下拉菜单样式
下拉菜单在网站中到处可见. 下面用css设置下拉菜单样式. <!DOCTYPE html> <html> <head> <title>淘宝</ti ...
使用CSS实现鼠标悬浮标题出现动态下划线
今天来实现下面图片的效果要实现这种效果只需要使用到background这个属性了. 首先创建有个div 输入一段文字然后在设置background属性这时候页面就会出现这样子文字背景填充满了 ...

CSS实现鼠标悬浮时下拉菜单栏功能

CSS实现鼠标悬浮时下拉菜单栏功能相关推荐

最新文章

热门文章