<!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. Java算法——数组

    * 已知一个数组int[98],该数组里面存储了0~99共100个数字中的98个,数字不重复,请用算法算出0~99中缺少的2个数字是哪两个? * 要求:数组自己用程序生成,数值介于0~99,相互之间不 ...

  2. Codeforces Round #284 (Div. 2) A

    解题思路:给出 n个电影的精彩时段(a[i],b[i]),和每次可以跳过的时间x,问要看完所有的精彩时刻,至少需要看多长时间的电影. 因为要时间最少,所有除了精彩时刻的电影则能跳过就跳过(用取余来算) ...

  3. ZBrush中平滑笔刷介绍

    平滑笔刷在ZBrush®中的使用颇多,它可以在ZBrush®模型的多层细分下工作,并且能够控制对模型的平滑效果,而且还能将模型的细节完整保留.默认情况下,按住Shift键就会切换到平滑笔刷,根据调整不 ...

  4. 20 个让你效率更高的 CSS 代码技巧

    在这里想与你分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合.有一些是面向CSS初学者的,有一些知识点是进阶型的.希望每个人通过这篇文章都能学到对自己有用的知识. 1.注意外边距折叠 ...

  5. python之类的组合

    类的组合 学校与课程没有共同点,课程与老师没有共同点,但是学校与课程有关联,课程与老师有关联:学校.课程.老师是三个完全不同的类:课程是属于学校的,老师是教课程的,此时我们就用到类的组合来关联,学校- ...

  6. java中的string trim具体有什么用处。。。

    去掉字符串首尾空格 防止不必要的空格导致错误public class test{ public static void main(String[] args) { String str = " ...

  7. Vue-给对象新增属性（使用Vue.$set()）

    在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 根据官方文档定义 ...

  8. StringUtils 的填充方法

    注意:两个参数的用空格填充,三个参数的用后面的参数填充 第一个参数要填充的字符串,第二个是需要的长度,第三个是以什么填充. 左侧填充: leftPad(): StringUtils.leftPad(S ...

  9. 利用Python对文件进行批量重命名

    最近几天工作的内容是对40个项目进行考核,每个项目都需要一个考核评分表,已经有了项目的列表. 如果用常规的方法,需要复制40个文件,并逐个修改,不光工作量大,也容易出错,后期修改也不方便. 于是想到了 ...

  10. javascript-js常用插件集合

    area.js 中国地区分级的js代码  Scripts/crypto.js  CryptoJS (crypto.js) 为 JavaScript 提供了各种各样的加密算法               ...