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 属 ...
随机推荐
- Android笔记——提升ListView的运行效率
之所以说 ListView 这个控件很难用,就是因为它有很多的细节可以优化,其中运行效率就是很重要的一点.目前我们ListView 的运行效率是很低的,因为在 FruitAdapter 的getVie ...
- 使用JAVA编写电话薄程序，具备添加，查找，删除等功能
//该程序需要连接数据库.根据word文档要求所有功能均已实现.//大部分方法基本差不多,//在查询修改的时候能输出 最大ID号 和最小ID号,并且可以对输入的ID号进行判断是否存在(具体方法请查看 ...
- PHP浅复制与深复制
原文链接:http://www.orlion.ga/731/ php用clone复制对象有一个问题,下面用代码来说明问题: class Foo{ public $bar; public $name; ...
- 哪些HTML5特性值得期待
首先大家可以看一下<HTML5程序设计(第二版)>最后一章关于HTML5未来展望.地址:http://www.ituring.com.cn/article/1690?q=html5%E6% ...
- c# 实现简单的socket通信
服务端 using System.Net.Sockets; using System.Net; using System.Threading; namespace SocketServer { cla ...
- GCD－两个网络请求同步问题
在网络请求的时候有时有这种需求 两个接口请求数据,然后我们才能做最后的数据处理.但是因为网络请求是移步的 .我们并不知道什么时候两个请求完成 . 通常面对这样的需求会自然的想到 多线程 啊 .表现真正 ...
- ACM-南京理工大学第八届程序设计竞赛-网络赛（2016.04.17）
A.偷吃糖果Time Limit: 1000Ms Memory Limit: 65536KB Description小鱼喜欢吃糖果.他有两盒糖果,两盒糖果分别仅由小写字母组成的字符串s和字符串t构成. ...
- JavaScript基础深入研究
一.DOM事件 1.事件阻止API preventDefault() — 阻止浏览器默认 stopPropagation() — 阻止事件流冒泡 stopImmediatePropagation() ...
- dsoframer 使用笔记
dsoframer是微软提供一款开源的用于在线编辑.调用Word.Excel.PowerPoint等的ActiveX控件. 1.层覆盖 如果需要在文档编辑区域上方覆盖一个div的话,z-index无效 ...
- 优化JS加载时间过长的一种思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点 ...