<!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. ubuntu下无法将iNode绑定到侧边栏的解决办法

    title: ubuntu下无法将iNode绑定到侧边栏的解决办法 toc: false date: 2018-09-01 17:43:52 categories: methods tags: ubu ...

  2. 动态连通性问题：union-find算法

    写在前面的话: 一枚自学Java和算法的工科妹子. 算法学习书目:算法(第四版) Robert Sedgewick 算法视频教程:Coursera  Algorithms Part1&2 本文 ...

  3. BZOJ 4358 坑 莫队+线段树 死T

    这是一个坑 竟然卡nsqrt(n)logn T死 等更 //By SiriusRen #include <cmath> #include <cstdio> #include & ...

  4. jQuery在多个div中，删除指定项

    之前工作中有一个需求,就是在一堆图片列表中,点击具体的图片,并从界面移除:点击具体的图片,下载:这是一个思路 <style type="text/css" media=&qu ...

  5. WebApi笔记

    WebApi有一段时间没用了,这几天用webapi做了一个接口供第三方调用,又重新折腾了下,做个笔记记录下心得,防止遗忘. 1.webapi使用的RESTful风格的传参方式,其实就是充分利用HTTP ...

  6. ZBrush中的布料技巧分享

    今天主要给大家介绍一种在ZBrush®3D图形绘制软件中创建特定类型的布料的技巧,这种方法简单却非常强大. 这个想法源自下面这张图: 我们今天所要讲的技巧可能不是实现复杂的服装设计最有效的方法,但确实 ...

  7. phpstorm中，光标变成一个长方红色块，如何调回来？

    今天使用phpstorm,不知道碰到了什么,光标变成长方红色块(如图),搞半天终于调回来了,变回了细细的竖线,记录一下: 其实按一下insert键就可以了

  8. thinkphp queue

    composer create-project topthink/think composer require topthink/think-queue php think queue:work -- ...

  9. BZOJ 1878 HH的项链 (树状数组+离线)

    题目大意:给你一个序列,求某区间出现不同的数的个数. 貌似离线树状数组是最好的解法 先把所有询问挂在它们询问的右端点上 然后从头到尾遍历这个序列,记录这个位置的值上一次出现的位置 那么,当遍历到第i位 ...

  10. LAMP 环境搭建备忘 -- Linux的安装（一）

    LAMP指的是 Linux + Apatch + MySQL / MariaDB + PHP/Perl/Python 一套搭建网站服务器的开源软件组合.工作原理图如下: 下面开始环境搭建 1 Linu ...