<!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. Rabbit MQ 学习 （二）

    接连上一篇 :安装Erlang环境 之后,这篇安装 Rabbit Server 官网下载安装包:http://www.rabbitmq.com/install-windows.html 打开安装一路下 ...

  2. EntityFramework使用及优化

    1. 简介 ORM框架:Object Relation Mapping,用操作对象的方式来操作数据库 其它框架:Dapper.NHibernate,首推EF,微软官方的. EF底层还是ADO.NET实 ...

  3. <video> controlsList

    Audio/Video Updates in Chrome 58 <video controls controlsList="nofullscreen nodownload norem ...

  4. 移动端 | Vue.js对比微信小程序基础语法

    (1)vue 自定义组件与父组件的通信,props:[abb],可以看成自组建的一个自定义属性 (2)vue 模版语法{{}} 只能是在DOM中插入,<div>{{acc}}</di ...

  5. 跨域-jsonp、cors、iframe、document.domain、postMessage()

    同源策略 概念:同源: 协议.域名.端口号 完全相同 同源策略是浏览器的一种安全策略:且浏览器不会将违反同源策略的响应信息返回 http://127.0.0.1:3000/index.html     ...

  6. 页面定制CSS代码初探（六）：h2、h3 标题自动生成序号 详细探索过程

    前言 最近在整理博客写作格式的规范,碰到一个问题:标题要不要加序号? 直到我碰到一个人这么说 手动维护编号实在是一件很闹心的事情, 如果位置靠前的某个段落被删除了, 那么几乎每个段落的编号都要手动修改 ...

  7. web_测试用例注意点

    测试是一种思维,包括情感思维和智力思维,情感思维主要体现在一句俗语:思想决定行动上(要怀疑一切),智力思维主要体现在测试用例的设计上.具有了这样的思想,就会找出更多的bug.(^_^个人认为,不代表官 ...

  8. Java语言特点与学习

    Java语言是一款面向对象的一款高级语言是由Sun Microsystems公司(现已被oracle公司收购).由James Gosling和同事们共同研发,并在1995年正式推出,据oracle官方 ...

  9. Vue学习之路第九篇：双向数据绑定 v-model指令

    1.学习准备: ①:双向数据绑定可以简单理解为:后端定义的数据改变,前端页面展示的时候会自动改变,数据通过前端页面修改的时候,后端定义的数据内容也会随之改变. ②:指令中只有v-model可以实现双向 ...

  10. BZOJ 2260 商店购物（最小树形图）

    不会最小树形图的出门左转 其实如果确定每种商品第一件的购买顺序,那么剩下的商品肯定是以最优惠价格购买的. 如何确定各种商品第一件购买时的最小价值呢? 考虑如果购买了\(a_i\)这种商品,那么就能以\ ...