<!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. 大话主席（superslide和 touchslide）插件的使用

    对于实现效果来说,插件的办事效率真的是太高了,而且里边也被处理过兼容性,用起来实在是特别方便,现在我们来说说大话主席中的slide插件,它分为pc端(superslide)和移动端(touchslid ...

  2. 用过的jQuery记录

    var list= $('input:radio[name="name"]:checked').val(); //选择input中单选name为“name”的并且是选中状态的 in ...

  3. SQLAlchemy tutorial

    SQLAlchemy tutorial 重要概念 ORM:数据库对象 <--> class --> 类实例instance 定义数据库连接 session:数据库事务通过sessio ...

  4. 3DSMAX制作逼真的欧式沙发建模教程

    这篇教程是朋友们介绍利用3DSMAX制作逼真的欧式沙发建模,教程制作出来的效果真心很不错,通过这篇教程,大家可以学习沙发建模的制作方法和思路,推荐过来,一起来学习吧! 3DSMAX软件下载:http: ...

  5. EntityFramework 一

    EntityFramework EF核心库 EntityFramework.SqlServer EF针对sqlsever的库 引用 system.Data.Entity   EF相比SQL语句方便,但 ...

  6. HDU 5289 Assignment [优先队列 贪心]

    HDU 5289 - Assignment http://acm.hdu.edu.cn/showproblem.php?pid=5289 Tom owns a company and he is th ...

  7. JavaScript 运行机制 & EventLoop

    JavaScript 运行机制 & EventLoop 看阮老师博客和自己的理解,记录的学习笔记,js的单线程和 事件EventLoop 机制. 1. JavaScript是单线程 JavaS ...

  8. HDU 5912 Fraction

    题目来源:2016 CCPC 长春站 题意:青蛙先生想计算一个式子的值,输入两个数列a[],b[]求出最后的分子和分母 思路:一开始看到这个图片首先想到的是递归实现,递归部分始终计算的是右下部分 /* ...

  9. 三、Git 分支

    使用分支意味着你可以把你的工作从开发主线上分离开来,以免影响开发主线.有人把 Git 的分支模型称为它的`‘必杀技特性’',也正因为这一特性,使得 Git 从众多版本控制系统中脱颖而出. 1.分支简介 ...

  10. 小学生绞尽脑汁也学不会的python(面对对象-----类与类之间的关系)

    小学生绞尽脑汁也学不会的python(面对对象-----类与类之间的关系 1. 依赖关系. 最轻的一种关系 在方法中引入另一个类的对象 class Elephant: def __init__(sel ...