简易的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 ...
随机推荐
- POJ 1543 暴搜
题意:输出a^3=b^3+c^3+d^3的所有a,b,c,d的值. b,c,d由小到大且b,c,d都大于1. 思路: 按照题意写就好.... // by SiriusRen #include < ...
- struts2学习之基础笔记7
第十二章 Struts 2的标记库 1 OGNL简介 Object-Grephic Navigtor Language 图对象导航语言 作用:图对象导航语言是Struts 2标记库中为其相应标记属性进 ...
- com.sun.jdi.internalException:Unexpected JDWP Error:103////Method threw 'java.lang.IllegalArgumentEx
retrofit2+RxJava2 的一些坑 今天开发新项目,本着积极向上的学习态度,经过多番考虑我决定使用retrofit2 + RxJava2来做为我的网络请求......神说:你的想法非常好 先 ...
- Windos下的6种IO模型简要介绍
windows进行数据的收发有6种IO模型.分别是阻塞(blocking)模型,选择(select)模型,异步选择(WSAAsyncSelect)模型,事件选择(WSAEventSelect )模型, ...
- 给大家介绍几个常见的Android代码片段
今天在源码天堂那个网站,也下载了一个不错的Android源码特效,现在分享一下给博客园的朋友吧,个人觉得那个网站还是挺不错的,希望大家能够使用得上. 仿美图秀秀拼图功能源码 仿美图秀秀拼图功能源码,最 ...
- （转）硬盘结构，主引导记录MBR，硬盘分区表DPT，主分区、扩展分区和逻辑分区，电脑启动过程
硬盘结构硬盘有很多盘片组成,每个盘片的每个面都有一个读写磁头.如果有N个盘片.就有2N个面,对应2N个磁头(Heads),从0.1.2开始编号.每个盘片的半径均为固定值R的同心圆再逻辑上形成了一个以电 ...
- 问题请教：关于同一个POD中多容器的广播信息问题
广大博友好,最近在K8S集群中遇到一个问题,贴出来同大家分享一下 同一个POD中多个容器 如何处理广播信息? 经测试 同一个POD中当先启动的容器占用广播端口后,其他的容器启动就会报bind erro ...
- 机器学习实战笔记--AdaBoost（实例代码）
#coding=utf-8 from numpy import * def loadSimpleData(): dataMat = matrix([[1. , 2.1], [2. , 1.1], [1 ...
- composer install或者update 出错
composer install或者update 出错Your requirements could not be resolved to an installable set of package ...
- 进入docker 容器内命令
docker exec :在运行的容器中执行命令 语法 docker exec [OPTIONS] CONTAINER COMMAND [ARG...] OPTIONS说明: -d :分离模式: 在后 ...