CSS实现弹出导航菜单
查看实际效果：http://keleyi.com/a/bjac/vksd7321.htm
完整代码，保存在html文件打开也可看到效果：
<!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><base target="_blank" />
<style>
ul,li{ margin:0px; padding:0px; list-style:none;}
.div_a{ width:300px; float:left;}
.div_a li{ width:300px; height:50px; border-bottom:1px solid #fff; cursor:pointer; background-color:#060; text-align:center; line-height:50px; font-size:18px; color:#fff;}
.div_a1-keleyi-com{ width:300px; height:100px; position:relative; background-color:#F00; top:-50px; left:250px; z-index:999; display:none;}
.div_a li:hover .div_a1-keleyi-com{ display:block;}.div_a a{ color:white;}
</style>
</head>
<body>
<div class="div_a">
<ul>
<li><a href="http://keleyi.com/menu/aspnet/">ASP.NET</a><div class="div_a1-keleyi-com"><a href="http://keleyi.com/a/bjac/kjsrt3b0.htm">基于微软.NET的编程平台</a></div></li>
<li><a href="http://keleyi.com/a/bjac/ck9atu5j.htm">PHP</a><div class="div_a1-keleyi-com"><a href="http://keleyi.com/a/bjac/mnmpm4bv.htm">使用最多的WEB开发语言</a></div></li>
<li><a href="http://keleyi.com/a/bjac/kjsrt3b0.htm">AJAX</a><div class="div_a1-keleyi-com"><a href="http://keleyi.com/a/bjac/182di68b.htm">实现网页交互式设计</a><br /><a href="http://keleyi.com/a/bjac/13639353acde40c.htm">左侧可弹出隐藏div</a></div></li>
<li><a href="http://keleyi.com/menu/csharp/">C#.NET</a><div class="div_a1-keleyi-com"><a href="http://keleyi.com/menu/net/">新一代微软平台编程语言</a></div></li>
<li><a href="http://keleyi.com/menu/javascript/">JAVA</a><div class="div_a1-keleyi-com"><a href="http://keleyi.com/a/bjac/9a9irmcm.htm">最有前途的编程语言</a></div></li>
<li><a href="http://keleyi.com/a/bjac/ck9atu5j.htm">DELPHI</a><div class="div_a1-keleyi-com"><a href="http://keleyi.com/a/bjac/5939d3b2c920ff6d.htm">最具潜力的编程语言</a></div></li>
</ul>
</div><!--柯 乐 义-->
</body>
</html>
CSS实现弹出导航菜单的更多相关文章
- jquery网站左侧弹出导航菜单
下载
- 转：jQuery弹出二级菜单
<html> <head> <meta http-equiv="content-type" content="text/html; char ...
- 仿酒仙网的一款jQuery侧栏弹出导航栏特效
仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特效.大家可以拿去研究研究 . 注意:该特效还支持挨千刀的IE6啊,之强大. ...
- EditorGUILayout.EnumPopup 枚举弹出选择菜单
http://www.unity蛮牛.com/thread-25490-1-1.html http://www.unity蛮牛.com/m/Script/EditorGUILayout.EnumPop ...
- WPF：设置弹出子菜单的是否可用状态及效果
需求: 设置弹出子菜单(二级)项仅首项可用,其他项均不可用:不可用是呈灰色效果. 注: 菜单项都是依据层级数据模板.具体格式如下: StackBlock{TextBlock{Image}.TextBl ...
- ListView的使用（二）长按弹出上下文菜单
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView ...
- JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操 ...
- 微信小程序弹出操作菜单
微信小程序弹出操作菜单 比如在页面上放一个按钮,点击按钮弹出操作菜单,那么在按钮的 bindtap 事件里,执行下面的代码即可: wx.showActionSheet({ itemList: ['A' ...
- 如何在 QWidget 窗口上弹出右键菜单
Title : QWidget 窗口上弹出右键菜单的两个方法 Solution 1 : 给一个 QWidget 添加 QActions,设置 QWidget 的 contextMenuPolicy 属 ...
随机推荐
- Java面试（1）-- Java逻辑运算符
class Demo04{ public static void main(String[] args){ //逻辑运算符 //例1 System.out.println(true | false & ...
- WCF学习之旅—WCF第二个示例（五）
二.WCF服务端应用程序 第一步,创建WCF服务应用程序项目 打开Visual Studio 2015,在菜单上点击文件—>新建—>项目—>WCF服务应用程序.在弹出界面的“名称”对 ...
- Latch2：Latch和性能
1,数据的IO操作 SQL Server访问的任何一个Page必须存在于内存中,如果不存在于内存中,那么SQL Server发出 Disk IO请求,将数据页从Disk读取到内存中,然后SQL Ser ...
- 前端MVC框架Backbone 1.1.0源码分析(一)
前言 如何定义库与框架 前端的辅助工具太多太多了,那么我们是如何定义库与框架? jQuery是目前用的最广的库了,但是整体来讲jQuery目的性很也明确针对“DOM操作”,当然自己写一个原生态方法也能 ...
- dev c++ Boost库的安装
dev c++ 的boost库的安装步骤 然后点击“check for updates”按钮 最后点击“Download selected”按钮,下载完成后安装.... 给dev添加boost库文件, ...
- [ASP.NET MVC] 利用自定义的AuthenticationFilter实现Basic认证
很多情况下目标Action方法都要求在一个安全上下文中被执行,这里所谓的安全上下文主要指的是当前请求者是一个经过授权的用户.授权的本质就是让用户在他许可的权限范围内做他能够做的事情,授权的前提是请求者 ...
- iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流
上篇博客的实例是自带的UICollectionViewDelegateFlowLayout布局基础上来做的Demo, 详情请看<iOS开发之窥探UICollectionViewControlle ...
- Oracle配置数据库诊断
环境:RHEL 6.4 + Oracle 11.2.0.4 1. 设置ADR 2. 使用Support Workbench 3. 恢复块介质 Reference 1. 设置ADR 1.1 查看v$di ...
- struts2学习笔记--动手搭建环境+第一个helloworld项目
在Myeclipse中已经内置好了struts2的环境,但是为了更好的理解,这里自己从头搭建一下: 前期准备:下载struts2的完整包,下载地址:https://struts.apache.org/ ...
- Spring Boot启动流程详解（一）
环境 本文基于Spring Boot版本1.3.3, 使用了spring-boot-starter-web. 配置完成后,编写了代码如下: @SpringBootApplication public ...