css实现鼠标滑过展现菜单

这是在界面中浮出的菜单，当鼠标移上去时会出现二级菜单
（该需求在查找时发现资料比较凌乱，所以按照查找到的资料，配合图进行直观的展示）
效果图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>纯css向右展开多级导航菜单代码</title><style>   *{margin: 0;padding: 0;}   .qdxw{ margin:100px 100px;}    .qdxw ul a{width: 200px;font-family: '微软雅黑';font-size: 14px;color: #aaa;text-decoration: none;}    .qdxw ul a:hover{color: #000;text-decoration: none;}    .qdxw ul li{width: 200px;height: 35px;line-height: 35px;text-align: center;position: relative;}   .qdxw ul li:hover{background: #aaa;}   .qdxw ul{width: 200px;height: auto;position: absolute;background: #ccc;list-style: none;}    .qdxw ul.nav2{left: 199px;top: 0;display: none;}   .qdxw ul.nav3{left: 199px;top: 0;display: none;}    .qdxw .nav1 .li1:hover ul.nav2{display: block;background: #c1c1c1;}    .qdxw .nav2 .li2:hover ul.nav3{display: block;background: #c1c1c1;}</style></head><body><!--代码部分--><div class="qdxw"><ul class="nav1">    <li class="li1">  <a href="#">一级导航是我们</a>        <ul class="nav2">            <li class="li2"><a href="#">二级导航</a>                <ul class="nav3">                    <li class="li3"><a href="#">三级导航</a></li>                    <li class="li3"><a href="#">三级导航</a></li>               </ul>            </li>            <li class="li2"><a href="#">二级导航</a></li>        </ul>    </li></ul></div><!--代码部分end--></body>

css实现鼠标滑过展现菜单相关推荐

css 鼠标滑过li变背景图,CSS定义鼠标滑过变换背景的导航菜单
我们经常看到的网站基本上都有导航菜单,有的网站看上去非常酷,鼠标一移动到上面自动改变颜色,这样的导航有两种方法可以实现:一种是鼠标经过图像,一种是CSS定义. 鼠标经过图像是把菜单做成两张文字相同但颜 ...
html鼠标滑过导航条展开导航条,JS+CSS实现鼠标滑过时动态翻滚的导航条效果
本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果.分享给大家供大家参考.具体如下: 这是一款鼠标悬停时动态翻滚的导航条,注意这里用了两个背景图,请等待网页加载完成或多刷新几次,这个是使用J ...
html鼠标滑过导航条展开导航条,jquery css实现鼠标滑过导航菜单栏动画效果
对于导航栏的实现对于前端人员来说再简单不过了,但是如何让我们的导航看起来生动,给用户一种很高大上的感觉,却需要我们好好设计一下.今天我给大家带来的是我自己在项目中用到的一个例子,当我们鼠标滑过导航栏时 ...
css 设置鼠标滑过变色效果
1.样式说明: 当鼠标滑过或者悬停在图片上时,图片颜色变灰,看似是图片变灰变色效果,实际上是图片被设置为半透明样式 2.CSS样式代码: (1)HTML代码: <div class=" ...
html 鼠标经过出现文字,CSS实现鼠标滑过文字弹出一段说明文字无JS代码
用css实现内容弹出,无js代码,下面代码直接拷贝了就可用, 需要背景图的到下面的地址下载,谢谢! 地址:http://download.csdn.net/detail/zurich1979/7229 ...
CSS 背景鼠标滑过，提示文字
18work 向高手程序员的快速前进,追赶中八分之一技术水平的开始具备,中级程序员水平的逐步完全胜任中! <!DOCTYPE html> <html lang="en&q ...
html表格鼠标划过变色,CSS实现鼠标滑过表格变色
每个单元格变色: 第1行第1列第2行第2列第3行第3列第4行第4列第5行第5列 ------------------------ 以上都用到expression,实现变得很方便,但是 ...
css创建鼠标悬停下拉菜单样式
下拉菜单在网站中到处可见. 下面用css设置下拉菜单样式. <!DOCTYPE html> <html> <head> <title>淘宝</ti ...
Div+CSS、鼠标滑过特效、导航栏效果——简洁的个人博客设计(7页) 学生HTML个人网页作业作品下载个人主页博客网页设计制作大学生个人网站作业模板简单个人网页制作
HTML5+CSS大作业--简洁的个人博客设计(7页) 学生HTML个人网页作业作品下载个人主页博客网页设计制作大学生个人网站作业模板简单个人网页制作常见网页设计作业题材有个人. 美食. 公 ...

css实现鼠标滑过展现菜单

css实现鼠标滑过展现菜单相关推荐

最新文章

热门文章