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 属 ...
随机推荐
- EditText中imeOptions属性使用及设置无效解决
虽然通常输入法软键盘右下角会是回车按键 但我们经常会看到点击不同的编辑框,输入法软键盘右下角会有不同的图标 点击浏览器网址栏的时候,输入法软键盘右下角会变成“GO”或“前往” 而我们点击Google搜 ...
- 使用JAVA编写电话薄程序，具备添加，查找，删除等功能
//该程序需要连接数据库.根据word文档要求所有功能均已实现.//大部分方法基本差不多,//在查询修改的时候能输出 最大ID号 和最小ID号,并且可以对输入的ID号进行判断是否存在(具体方法请查看 ...
- HTML5的特性,发展,及使用
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #ffffff } p.p2 { margin: 0.0px 0. ...
- SSISDB8：使用SSISDB记录的消息Troubleshoot packages
在执行Package时,SSISDB都会创建唯一的OperationID 和 ExecutionID,标识对package执行的操作和执行实例(Execution Instance),并记录opera ...
- 【Win10应用开发】协议-下篇：自定义多个协议
前面介绍了如何为应用程序自定义协议,于是有朋友会问,我希望为我的应用注册多个协议,不同的协议处理不同的事情,能吗?答案是能的. 方法主要在配置清单文件上,这里我给出一个例子,示例应用将注册两个协议,分 ...
- 列出场景对象Lightmap属性
首先上效果图: 编辑器代码: using UnityEngine; using UnityEditor; using System.Collections; public class Lightmap ...
- Topology and Geometry in OpenCascade-Adapters
Topology and Geometry in OpenCascade-Adapters eryar@163.com 摘要Abstract:本文简要介绍了适配器模式(adapter pattern) ...
- js self = this的解释
Demo 1: function Person(){ this.name = 'hjzgg'; this.age = 24; this.show = function(){ alert(name + ...
- 基于X86平台的PC机通过网络发送一个int（32位）整数的字节顺序
1.字节顺序 字节顺序是指占内存多于一个字节类型的数据在内存中的存放顺序,通常有小端.大端两种字节顺序.小端字节序指低字节数据存放在内存低地址处,高字节数据存放在内存高地址处:大端字节序是高字节数据存 ...
- AngularJS之Scope及Controller（一）
前言 之前有接触过基本的AngularJS,未过多涉及,于是乎本系列我们来着重讲讲AngularJS,对AngularJS中重要的几大内容进行梳理并进行一些小的例子的书写.在之前项目过程中用到过ava ...