<!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. 为IT程序员量身定制的12个目标——很经典

    对程序员们来说挑战自我非常重要,要么不断创新,要么技术停滞不前.新年伊始,我整理了12个月的目标,每个目标都是对技术或个人能力的挑战,而且可以年复一年循环使用. 01. 变得有耐心 02. 保持健康 ...

  2. Elasticsearch部署异常Permission denied

    异常描述 在Linux上部署ElasticSearch时抛出了一个异常如下: log4j:ERROR setFile(null,true) call failed. java.io.FileNotFo ...

  3. ValueProvider核心的值提供系统

    Model绑定的数据具有多种来源: 提交的表单 Json字符串 当前路由数据 请求地址的查询字符串 ASP.NET MVC将这种基于不同数据来源的数据提供机制实现在ValueProvider的组件中 ...

  4. WCF之操作重载

    服务契约的方法重载,会在装载宿主时,抛出异常. 解决是在操作契约上Name设置为不同值,但是生成的代理会把Name的名称作为方法的名称,不过我们可以手动的修改代理类,使得方法名与服务声明的名称一样. ...

  5. （转载） Android Studio你不知道的调试技巧

    Android Studio你不知道的调试技巧 标签: android studio 2015-12-29 16:05 2514人阅读 评论(0) 收藏 举报  分类: android(74)    ...

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

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

  7. linux拷贝文件

    linux之cp/scp命令+scp命令详解 2011-03-09 17:27:22|  分类: Linux |  标签:linux  cp  scp  commond   |字号 订阅   名称:c ...

  8. javaScript注释 to 颜文字

    将javascript 注释(alert.console)转化为 颜文字语言. http://utf-8.jp/public/aaencode.html

  9. day13 基本的文件操作(好东西)

    目录 基本的文件处理 什么是文件 如何使用文件 使用Python写一个小程序控制文件 open(打开文件) read: readline:一次性读取一行 del:删除 close:关闭 write(写 ...

  10. luogu 自适应Simpson1

    自适应simpson1 题意 求一个定积分 (可以手推公式,但是我不想推怎么办) 解法 用一个又一个的二次函数覆盖原函数,则可以近似的得到原函数的积分.(这就是Simpson) 模板在下面: #inc ...