<!DOCTYPE html>
<html>
<head>

<style>
	body{
		margin:0;
	}
	.dropmenu{
		background-color:silver;
		width:50px;
		float:right;	/*控制下拉菜单在右侧*/
	}
	.dropmenu-title{
		color:purple;
		margin:10px;
	}
	.dropmenu-content{
		display:none;
		position:absolute;
		background-color:gray;
		right:0;	/*与float:right配合使用，使得下拉内容不超出右侧边界*/
	}
	.dropmenu:hover .dropmenu-content{
		display:block;
	}
	.dropmenu-content a{
		display:block;
		border:1px solid green;
	}
</style>

</head>
<body>

<h2>CSS Dropmenu</h2>
<div class="dropmenu">
	<b class="dropmenu-title">WLs</b>
	<div class="dropmenu-content">
		<ol>
			<li><a href="">ASP.NET</a></li>
			<li><a href="">JSP</a></li>
			<li><a href="">ASP</a></li>
			<li><a href="">PHP</a></li>
			<li><a href="">JAVA</a></li>
			<li><a href="">VB.NET</a></li>
			<li><a href="">Python</a></li>
			<li><a href="">JavaScript</a></li>
		</ol>
	</div>
</div>
<h2>Over</h2>

</body>
</html>

简易的CSS下拉菜单 - 1的更多相关文章

  1. 超简洁的CSS下拉菜单

    效果体验:http://hovertree.com/texiao/css/3.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http ...

  2. 支持多种浏览器的纯css下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  4. 华丽导航CSS下拉菜单特效

    华丽导航CSS下拉菜单特效,华丽导航,导航特效,CSS,下拉菜单,华丽特效. 代码地址:http://www.huiyi8.com/sc/26811.html 风景图片网:http://www.hui ...

  5. CSS：CSS 下拉菜单

    ylbtech-CSS:CSS 下拉菜单 1.返回顶部 1. CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例 实例演示 1 实例演示 2 基本下拉菜单 当鼠标 ...

  6. 纯css下拉菜单的制作

    通过观察下拉菜单的过程,发现有两种状态,一种是鼠标没有hover时,一种是鼠标hover时. 主菜单hover时,显示子菜单:主菜单没有hover时,不显示子菜单 <!DOCTYPE html& ...

  7. [CSS]下拉菜单

    原理:先让下拉菜单隐藏,鼠标移到的时候在显示出来 1>display 无动画效果,图片是秒出 2>opacity 有动画效果,我这里是1S出现,推荐配合绝对定位使用

  8. [HTML/CSS]下拉菜单

    原理:先让下拉菜单隐藏,鼠标移到的时候在显示出来 1>display 无动画效果,图片是秒出 2>opacity 有动画效果,我这里是1S出现,推荐配合绝对定位使用

  9. css下拉菜单写法

    网页导航栏的下拉效果,通过div框的显示和隐藏实现. <html> <head> <meta charset="UTF-8"> <titl ...

随机推荐

  1. 4. Median of Two Sorted Arrays[H]两个有序数组的中位数

    题目 There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the midian of the ...

  2. HDU 1757 矩阵快速幂加速递推

    题意: 已知: 当x<10时:f(x)=x 否则:f(x) = a0 * f(x-1) + a1 * f(x-2) + a2 * f(x-3) + --+ a9 * f(x-10); 求:f(x ...

  3. Ubuntu包管理工具整理

    概述 常用的包管理包含三类工具:dpkg.apt和aptitude.1 dpkg 主要是对本地的软件包进行管理,本地软件包包括已经在本地安装的软件包和已经下载但还没有安装的 deb 文件,不解决依赖关 ...

  4. [转]opencv学习资料

    转自:http://blog.csdn.net/poem_qianmo/article/details/20537737 1:Mat imread(const string& filename ...

  5. reflect 反射结合集合泛型的总结

    集合泛型: 可以放任何对象的 ArrayList  ArrayList list = new ArrayList();  没有限定泛型类型. list.add("lilin");l ...

  6. c/c++连接mysql数据库设置及乱码问题（vs2013连接mysql数据库，使用Mysql API操作数据库）

    我的安装环境: (1)vs2013(32位版) (vs2013只有32位的 没有64位的,但是它可以编译出64位的程序)  : (2)mysql-5.7.15(64位) vs2013中的设置(按步骤来 ...

  7. node——简单的服务器启动+乱码问题解决，响应报文头

    这个是一个比较简单的代码 // 1.加载hrrp模块 var http=require('http'); // 2.创建一个http服务对象 var server=http.createServer( ...

  8. HDU 1028 Ignatius and the Princess III（母函数整数拆分）

    链接:传送门 题意:一个数n有多少种拆分方法 思路:典型母函数在整数拆分上的应用 /********************************************************** ...

  9. 详解 QT 主要类 QWidget

    QWidget类是所有用户界面对象的基类,每一个窗口部件都是矩形,并且它们按Z轴顺序排列的.一个窗口部件可以被它的父窗口部件或者它前面的窗口部件盖住一部分. 先来看内容. AD: 2013云计算架构师 ...

  10. 新手学python-Day4-作业

    购物车程序 要求: 1.启动程序后,让用户输入工资,然后打印商品列表 2.允许用户根据商品编号购买商品 3.用户选择商品后,检查余额是否足够,够了就扣款,不够就提醒 4.可随时退出,退出时,打印已购买 ...