html 悬停二级菜单,使用HTML+CSS实现鼠标划过的二级菜单栏！

话不多说，先上效果图：

1、鼠标没在上面

image

2、鼠标放在一级菜单上，展开二级菜单

image

3、鼠标放在二级菜单上

image

二级菜单测试

/*为了使菜单居中*/

body {

padding-top:100px;

text-align:center;

}

/* -------------菜单css代码----------begin---------- */

.menuDiv {

border: 2px solid #aac;

overflow: hidden;

display:inline-block;

}

/* 去掉a标签的下划线 */

.menuDiv a {

text-decoration: none;

}

/* 设置ul和li的样式 */

.menuDiv ul , .menuDiv li {

list-style: none;

margin: 0;

padding: 0;

float: left;

}

/* 设置二级菜单绝对定位，并隐藏 */

.menuDiv > ul > li > ul {

position: absolute;

display: none;

}

/* 设置二级菜单的li的样式 */

.menuDiv > ul > li > ul > li {

float: none;

}

/* 鼠标放在一级菜单上，显示二级菜单 */

.menuDiv > ul > li:hover ul {

display: block;

}

/* 一级菜单 */

.menuDiv > ul > li > a {

width: 120px;

line-height: 40px;

color: black;

background-color: #cfe;

text-align: center;

border-left: 1px solid #bbf;

display: block;

}

/* 在一级菜单中，第一个不设置左边框 */

.menuDiv > ul > li:first-child > a {

border-left: none;

}

/* 在一级菜单中，鼠标放上去的样式 */

.menuDiv > ul > li > a:hover {

color: #f0f;

background-color: #bcf;

}

/* 二级菜单 */

.menuDiv > ul > li > ul > li > a {

width: 120px;

line-height: 36px;

color: #456;

background-color: #eff;

text-align: center;

border: 1px solid #ccc;

border-top: none;

display: block;

}

/* 在二级菜单中，第一个设置顶边框 */

.menuDiv > ul > li > ul > li:first-child > a {

border-top: 1px solid #ccc;

}

/* 在二级菜单中，鼠标放上去的样式 */

.menuDiv > ul > li > ul > li > a:hover {

color: #a4f;

background-color: #cdf;

}

/* -------------菜单css代码----------end---------- */

菜单一
- 二级菜单
- 二级菜单
- 二级菜单
菜单二
- 二级菜单
- 二级菜单
菜单三
- 二级菜单
- 二级菜单
- 二级菜单
- 二级菜单
- 二级菜单
菜单四
菜单五
- 二级菜单
- 二级菜单
- 二级菜单

html 悬停二级菜单,使用HTML+CSS实现鼠标划过的二级菜单栏！相关推荐

使用HTML+CSS实现鼠标划过的二级菜单栏
先上效果图: 1.鼠标没在上面 2.鼠标放在一级菜单上,展开二级菜单 3.鼠标放在二级菜单上代码: (点击此处预览代码效果) <html> <head><title&g ...
二级菜单HTML原理,CSS多级菜单的实例代码讲解
这是一个相当炫的功能,让网页看起来像桌面程序,如window的开始菜单.实现原理基本和纯CSS相册差不多,但要注意的事项比较多,让我们一步步来吧. 先来一个非常简单的一级菜单与悬停效果. 菜单一菜单 ...
css二级菜单会然下面遮住_JavaScript实现下拉二级菜单详解
下拉菜单最终效果如图: 实现原理,通过绝对定位的方式,使下拉列表脱离文档流.通过js或者css来控制鼠标移入后的效果初始时可以改变 1.display:none;使其隐藏 2.height:0px; ...
静态html左侧导航菜单代码,Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码...
本文介绍了Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码,分享给大家,具体如下: PC端移动端代码左侧导航 *{ margin:0; padding:0; } #header ...
CSS 控制鼠标划过，图片放大效果
♩ 背景今天在做后台管理 CMS 时,对于小图片的显示感觉太大了会浪费页面空间,想着在鼠标滑动时可以缓慢放大就好. ♪ 知识点 ①. transform:scale() 用法:transform: ...
为什么二级菜单会被挡住_武夷红茶为什么是二级茶？我们平时喝的红茶会不会被加了糖？...
首先我们来了解一下武夷红茶的制作工艺,传统的工艺我们就不聊啦,因为有太多的局限性.比方说烟熏,比方说轻搂.现在的新工艺大多采用萎凋槽和烤箱来萎凋,主要是加速茶叶失水的过程,缩短制作时间.萎凋的过程当中 ...
二级菜单打开一个时其他关闭_blender2.8教程顶部菜单栏
顶栏菜单程序菜单启动画面打开启动画面 . 支持Blender 开发筹资打开开发基金网站 Blender商店打开Blender商店. 关于发布说明打开最新发布说明. Blender官网 ...
html+css鼠标悬停发光按钮！[HTML鼠标悬停的代码]使用HTML + CSS实现鼠标悬停的一些奇幻效果!
源码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
css二级菜单的隐藏与显示_具有二级菜单的导航案例
下图为具有二级菜单的导航效果,鼠标悬浮在"服装"菜单时出现如图所示的二级菜单效果. 鼠标悬浮于二级菜单效果如下图所示: 注:鼠标悬浮于菜单时,二级菜单背景颜色为渐变,渐变颜色值为# ...

html 悬停二级菜单,使用HTML+CSS实现鼠标划过的二级菜单栏！

html 悬停二级菜单,使用HTML+CSS实现鼠标划过的二级菜单栏！相关推荐

最新文章

热门文章

html 悬停 二级菜单,使用HTML+CSS实现鼠标划过的二级菜单栏！

html 悬停 二级菜单,使用HTML+CSS实现鼠标划过的二级菜单栏！相关推荐

最新文章

热门文章

html 悬停二级菜单,使用HTML+CSS实现鼠标划过的二级菜单栏！

html 悬停二级菜单,使用HTML+CSS实现鼠标划过的二级菜单栏！相关推荐