使用HTML+CSS实现鼠标划过的二级菜单栏
先上效果图:
1、鼠标没在上面
2、鼠标放在一级菜单上,展开二级菜单
3、鼠标放在二级菜单上
代码: (点击此处预览代码效果)
<html>
<head>
<title>二级菜单测试</title>
<meta charset="utf-8">
<style type="text/css"> /*为了使菜单居中*/
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---------- */ </style>
</head>
<body> <!-- -------菜单html代码---------begin------- -->
<div class="menuDiv">
<ul>
<li>
<a href="#">菜单一</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li>
<a href="#">菜单二</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li>
<a href="#">菜单三</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li>
<a href="#">菜单四</a>
</li>
<li>
<a href="#">菜单五</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
</ul>
</div>
<!-- -------菜单html代码---------end------- --> </body>
</html>
使用HTML+CSS实现鼠标划过的二级菜单栏的更多相关文章
- 纯css实现鼠标感应弹出二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS样式--移动划过超链接鼠标变手型详解
用css控制鼠标样式的语法如下:<span style="cursor:*">文本或其它页面元素</span>把 * 换成如下15个效果的一种: 下面是对这 ...
- 鼠标划过用户名时在鼠标右下角显示div展示用户资料
最近做一个网站论坛,为了方便会员之间相互了解,又不想再做一个页面展示用户资料,就想到了鼠标划过用户名时在鼠标右下角显示div展示用户资料这个效果, 这里要注意的该方法不是给每个用户名的旁边都绑定一个d ...
- 鼠标划过图片title 提示实现
鼠标划过图片title 提示实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- JavaScript总结之鼠标划过弹出div单击出现对话框
为了满足他们的永无止境的要求,我可谓是任劳任怨啊,累断了双手,看瞎了双眼.这个是来写鼠标划过一个按钮,然后弹出一个小提示框解释,另外根据radio是否选中,判断点击后如何执行,然后执行之后再有一个确认 ...
- easyui toopTip,鼠标划过悬浮,显示一个小提示框的方法
easyui toopTip,鼠标划过悬浮,显示一个小提示框的方法 /*easyui,鼠标划过悬浮,显示一个小提示框的方法*/ function toopTip(idOrClass,showText) ...
- jQuery实现鼠标划过展示大图的方法
这篇文章主要介绍了jQuery实现鼠标划过展示大图的方法,实例分析了jQuery操作鼠标事件及图片处理的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jQuery实现鼠标划过展示大图 ...
- css实现鼠标悬浮后的提示效果
一.概述 很多时候网站中需要在鼠标划过小图标时,悬浮出提示性的文字.比如下图: 鼠标悬浮后的效果 这种效果可以使用css中的伪类hover来实现.但有时候搞不清两个元素的嵌套关系.使用了hover却没 ...
- css禁用鼠标点击事件
css禁用鼠标点击事件 .disabled { pointer-events: none; } <div class="main-container disabled"> ...
随机推荐
- web api 跨域问题的解决办法
在APP_Start文件夹下面的WebApiConfig.cs文件夹配置跨域 public static class WebApiConfig { public static void Registe ...
- 自己从0开始学习Unity的笔记 II (C#条件语句基础练习)
首先,自己用了下三目表达式,来做了一个闰年的判断,也就是能被400整除,或者是能够被4整除,但是不能被100整除的年份. int year; //输入的年 bool fourHunderd; //能被 ...
- Robolectric 单元测试中使用 Ressource
单元测试类中: @RunWith(RobolectricGradleTestRunner.class) @Config(constants=BuildConfig.class, sdk = 21) 获 ...
- mysql--mysql的安装与目录介绍
一.mysql的下载安装 1.下载安装 1.windows10下安装 我们采用绿色免安装版, 打开你的mysql文件夹中的bin目录,我的是这个样子的 将这个路径添加入系统环境变量,首先右键此电脑-- ...
- 516. Longest Palindromic Subsequence
Given a string s, find the longest palindromic subsequence's length in s. You may assume that the ma ...
- python中多线程,多进程,多协程概念及编程上的应用
1, 多线程 线程是进程的一个实体,是CPU进行调度的最小单位,他是比进程更小能独立运行的基本单位. 线程基本不拥有系统资源,只占用一点运行中的资源(如程序计数器,一组寄存器和栈),但是它可以与同属于 ...
- Writing analyzers
Writing analyzers There are times when you would like to analyze text in a bespoke fashion, either b ...
- [AIR] AS3操作文件时报SecurityError: fileWriteResource 错的解决方法
在用File操作(移动,删除等)或者写入文件时,以下写法会报错 var file:File =File.applicationDirectory.resolvePath("1.swf&quo ...
- 二手前端入门React项目
个人对ReactJS这门技术比较感兴趣,在基友的帮助下成功创建了一个React标准前端工程,过程中遇到了不少麻烦,今天作为笔记一般记录一下遇到的问题和解决方案. 基础环境 手头一台Mac 使用OSX系 ...
- 编程开发之--java多线程学习总结(4)
3.使用锁机制lock,unlock package com.lfy.ThreadsSynchronize; import java.util.concurrent.locks.Lock; impor ...