html/css 实现下拉菜单效果
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现下拉菜单效果</title>
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<div id="menu">
<ul> <li><a href="#">首页</a></li>
<li><a href="#">课程学习</a>
<ul> <li><a href="#">JavaScript</a></li>
<li><a href="#">HTML5</a></li> </ul> </li>
<li><a href="#">学习中心</a>
<ul>
<li><a href="#">论坛学习</a></li>
<li><a href="#">案例学习</a></li>
<li><a href="#">交流平台</a></li>
</ul>
</li>
<li><a href="#">经典案例</a>
<ul>
<li><a href="#">手风琴效果</a></li>
<li><a href="#">分类导航</a></li>
<li><a href="#">tag选项</a></li>
</ul> </li> <li><a href="#">关于我们</a></li> </ul> </div>
</body>
</html>
demo.css
*{ margin:0px; padding:0px;}
#menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}
ul{ list-style:none;}
ul li{ float:left; line-height:40px; text-align:center; position:relative;}
a{ text-decoration:none; color:#000; display:block; width:90px;}
a:hover{ color:#FFF; background-color:#666;}
ul li ul li{ float:none; border-left:none; margin-top:2px; background-color:#eee; }
ul li ul{ display:none; width:90px; position:absolute;}
ul li:hover ul{ display:block;}
效果:
2017-09-06 11:20:46
html/css 实现下拉菜单效果的更多相关文章
- HTML+CSS写下拉菜单
今天学习了使用HTML+CSS实现下拉菜单效果,在这个例子中,我学到了如下知识点: 设置背景图片(background-image.background-size) 如何让无序列表横向显示(float ...
- 24个 HTML5 & CSS3 下拉菜单效果及制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 推荐10个 CSS3 制作的创意下拉菜单效果
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 下拉菜单效果和tab选项卡切换
//下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
- CSS的下拉菜单被挡住,修改Z-INDEX也不成功
CSS的下拉菜单被挡住,修改Z-INDEX也不成功 做了一个鼠标放上去就出现的下拉菜单,但是这个下拉的内容被挡住了. Z-INDEX 是设置不同块的层次的,我修改了问题还是有. 后来发现是必须要把该便 ...
- 如何在webapp中做出原生的ios下拉菜单效果
github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...
- 纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器)
虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...
- 纯css实现下拉菜单
今天给大家分享一个纯html+css实现的下拉菜单.在此声明一点,源码并非出自本人之手,是同项目组一兄弟PLUTO写的.好东西嘛,所以果断拿出来和大家分享.如果有更好的想法或者建议,一定记得留言哦!好 ...
随机推荐
- MJ瀑布流学习笔记
1. 如果系统自带的布局的话,是这样: //系统自带的UICollectionViewFlowLayout 而不是UICollectionViewLayout UICollectionViewFlow ...
- swift中为什么要创造出可选型?
(1)因为nil这个东西,swift中没有就是没有. Int? 叫 整型可选型,如果不提前声明,直接赋值变量 nil会报错 . 可以将Int赋值给Int? ,但是不能将Int?赋值给Int . ...
- FastDFS搭建文件管理系统
参考:https://www.cnblogs.com/chiangchou/p/fastdfs.html 目录: 一:FastDFS介绍 1:简介: FastDFS 是一个开源的高性能分布式文件系统( ...
- [CSP-S模拟测试]:棋盘(数学+高精度)
题目描述 在一个大小为$N\times N$的棋盘上,放置了$N$个黑色的棋子.并且,对于棋盘的每一行和每一列,有且只有一个棋子.现在,你的任务是再往棋盘上放置$N$个白色的棋子.显然,白色棋子不能与 ...
- cordova+vue做的app解决引入cordova-plugin-splashscreen后启动先显示黑屏在显示启动页
先上项目目录结构cordova项目结构 android platform 结构 图中用红框框起来的为主要修改文件 这篇主要的讲cordova项目引用了cordova-plugin-splashscre ...
- Yii 1.1 常规框架部署和配置
<?php //index.php //入口文件配置操作 // change the following paths if necessary $yii=dirname(__FILE__).'/ ...
- centos环境下安装java环境
1-上java官网下载rpm安装包 jdk-7u80-linux-i586.rpm 2-新建文件夹,并把jdk-7u80-linux-i586.rpm上传到此文件夹下面 cd /usr/local/ ...
- python实现基于两张图片生成圆角图标效果的方法
python实现基于两张图片生成圆角图标效果的方法 这篇文章主要介绍了python实现基于两张图片生成圆角图标效果的方法,实例分析了Python使用pil模块进行图片处理的技巧,分享给大家供大家参考. ...
- css设计丝带
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8&quo ...
- 牛顿法求极值及其Python实现
最初对于牛顿法,我本人是一脸懵的.其基本原理来源于高中知识.在如下图所示的曲线,我们需要求的是f(x)的极值: 对于懵的原因,是忘记了高中所学的点斜式,直接贴一张高中数学讲义: 因为我们一路沿着x轴去 ...