简易的CSS下拉菜单 - 1
<!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的更多相关文章
- 超简洁的CSS下拉菜单
效果体验:http://hovertree.com/texiao/css/3.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http ...
- 支持多种浏览器的纯css下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
- 华丽导航CSS下拉菜单特效
华丽导航CSS下拉菜单特效,华丽导航,导航特效,CSS,下拉菜单,华丽特效. 代码地址:http://www.huiyi8.com/sc/26811.html 风景图片网:http://www.hui ...
- CSS：CSS 下拉菜单
ylbtech-CSS:CSS 下拉菜单 1.返回顶部 1. CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例 实例演示 1 实例演示 2 基本下拉菜单 当鼠标 ...
- 纯css下拉菜单的制作
通过观察下拉菜单的过程,发现有两种状态,一种是鼠标没有hover时,一种是鼠标hover时. 主菜单hover时,显示子菜单:主菜单没有hover时,不显示子菜单 <!DOCTYPE html& ...
- [CSS]下拉菜单
原理:先让下拉菜单隐藏,鼠标移到的时候在显示出来 1>display 无动画效果,图片是秒出 2>opacity 有动画效果,我这里是1S出现,推荐配合绝对定位使用
- [HTML/CSS]下拉菜单
原理:先让下拉菜单隐藏,鼠标移到的时候在显示出来 1>display 无动画效果,图片是秒出 2>opacity 有动画效果,我这里是1S出现,推荐配合绝对定位使用
- css下拉菜单写法
网页导航栏的下拉效果,通过div框的显示和隐藏实现. <html> <head> <meta charset="UTF-8"> <titl ...
随机推荐
- 在.NetCore2.0中使用Swagger
一.新建.netCore webapi项目 二.安装swagger ,通过 Package Manager 控制台:Install-Package SwashBuckle.AspNetCore -Pr ...
- 从零开始学习SVG
1 什么是SVG? MDN中的定义是:SVG即可缩放矢量图形(Scalable Vector Graphics,SVG),是一种用来描述二维矢量图形的 XML 标记语言. 简单地说,SVG 面向图形, ...
- Android宝宝点点乐游戏源码完整版
Android宝宝点点乐游戏源码完整版,是我从其他网站转载过来的,就是那个安卓教程网,该游戏目前已经上线了百度应用商店了,大家可以去搜索一下,看看演示吧. <ignore_js_op> & ...
- 2018年江西理工大学C语言程序设计竞赛高级组部分题解
B Interesting paths 考察范围:组合数学 此题是机器人走方格的变种,n*m的网格,从(1,1)走到(n,m),首先可以明确,水平要走m-1格,竖直要走n-1格,则走到目的地的任意一条 ...
- C/C++函数调用约定与this指针
关于 C/C++ 函数调用约定,大多数时候并不会影响程序逻辑,但遇到跨语言编程时,了解一下还是有好处的. VC 中默认调用是 __cdecl 方式,Windows API 使用 __stdcall 调 ...
- Java之秒杀活动解决方案
0 引言 本文主要描述,服务端做相关秒杀活动的时候,对应的解决方案,即高并发下的数据安全. 1 优化方案 1.1 乐观锁思路 Redis中的watch,请求时,通过Redis查询当前抢购数据,如果当前 ...
- Windows Vista 安装和使用指导 - 停止支持后的几条建议
简介 曾经被广大网民吐槽的Windows Vista现在已经淡出了人们的视线,但仍有一些朋友想要体验一下这个操作系统.Windows Vista是Windows发展路线上的里程碑,相比之前的Windo ...
- tensorflow之tf.slice()
转载:https://www.jianshu.com/p/71e6ef6c121b https://www.cnblogs.com/chamie/p/11073363.html def slice(i ...
- Consider defining a bean of type 'XX.XX.XX.XX.mapper.XXMapper' in your configuration.
今天构建一个springboot 项目,采用mybatis+mysql 然后就出现了这种错误....浪费我半天时间 Description: Field loginLogMapper in com.g ...
- struts2解决动态多文件上传的问题（上传文件与数据库字段一一对应)(转)
struts2多文件上传我想只要会用struts2的朋友都不会陌生,但是怎么在action中根据用户上传的文 件把文件路径写到数据库中对应的字段上呢?ps:我的意思是这样,页面上有固定的5个上传文件的 ...