<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

		<title></title>

		<style type="text/css">

			* {

				margin: 0px;

				padding: 0px;

			}

			#nav {

				width: 500px;

				background-color: #737373;

				height: 40px;

				/*border-radius: 10px;*/

				position: relative;

				margin: 0px auto;

				top: 0px;

			}

			.nav-container {

				width: 100%;

				height: 40px;

				position: absolute;

			}

			.banner {

				float: left;

				text-align: center;

				height: 40px;

				width: 20%;

				line-height: 40px;

			}

			.banner:hover {

				background-color: #00BFFF;

				cursor: pointer;

			}

			div ul {

				list-style: none;

				/*display: none;*/

				background-color: blue;

				overflow: hidden;

				/*模拟height:auto时候的情况*/

				max-height: 0px;

				transition: max-height 0.3s;

				/*多浏览器支持*/

				-moz-transition: height 1s;

				-webkit-transition: height 1s;

				-o-transition: height 1s;

			}

			.banner:hover ul {

				/*display: block;*/

				width: 100%;

				max-height: 160px;

			}

			div ul li {

				overflow: hidden;

			}

			div ul li:hover {

				background-color: red;

			}

		</style>

	</head>

	<body>

		<div class="nav-container">

			<div id="nav">

				<div id="nav-button-1" class="banner">第1个导航

					<ul>

						<li>1</li>

						<li>2</li>

						<li>3</li>

						<li>4</li>

					</ul>

				</div>

				<div id="nav-button-2" class="banner">第2个导航

					<ul>

						<li>1</li>

						<li>2</li>

						<li>3</li>

					</ul>

				</div>

				<div id="nav-button-3" class="banner">第3个导航

					<ul>

						<li>1</li>

						<li>2</li>

					</ul>

				</div>

				<div id="nav-button-4" class="banner">第4个导航

					<ul>

						<li>1</li>

						<li>2</li>

						<li>3</li>

						<li>4</li>

						<li>5</li>

					</ul>

				</div>

				<div id="nav-button-5" class="banner">第5个导航

					<ul>

						<li>1</li>

						<li>2</li>

						<li>3</li>

						<li>4</li>

						<li>5</li>

					</ul>

				</div>

			</div>

		</div>

	</body>

　　

运用css，对于下拉菜单的制作的更多相关文章

  1. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  2. HTML+CSS写下拉菜单

    今天学习了使用HTML+CSS实现下拉菜单效果,在这个例子中,我学到了如下知识点: 设置背景图片(background-image.background-size) 如何让无序列表横向显示(float ...

  3. CSS的下拉菜单被挡住，修改Z-INDEX也不成功

    CSS的下拉菜单被挡住,修改Z-INDEX也不成功 做了一个鼠标放上去就出现的下拉菜单,但是这个下拉的内容被挡住了. Z-INDEX 是设置不同块的层次的,我修改了问题还是有. 后来发现是必须要把该便 ...

  4. 纯css下拉菜单的制作

    通过观察下拉菜单的过程,发现有两种状态,一种是鼠标没有hover时,一种是鼠标hover时. 主菜单hover时,显示子菜单:主菜单没有hover时,不显示子菜单 <!DOCTYPE html& ...

  5. html5 css练习 下拉菜单制作

    *{    margin: 0;    padding: 0;}li{    list-style-type: none;}a{    text-decoration: none;}.ul1{marg ...

  6. 纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

    虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...

  7. 纯css实现下拉菜单

    今天给大家分享一个纯html+css实现的下拉菜单.在此声明一点,源码并非出自本人之手,是同项目组一兄弟PLUTO写的.好东西嘛,所以果断拿出来和大家分享.如果有更好的想法或者建议,一定记得留言哦!好 ...

  8. 纯洁CSS实现下拉菜单和下拉容器（纯洁CSS导航栏和导航下拉容器）

    虽然网上课程似即使案件大同小异,但我还是写,记笔记,也为您提供参考 我希望你能指导批评~~ 首先,我们必须列出ul li 开始我们的导航栏菜单也能说生产: 在下面的页面,我们先建XHTML结构体: & ...

  9. 11.css定义下拉菜单

    注意点: 1.设置a标签的width 和 height 的时候,直接设置是没用的,可以以这样两种方式设置 (1). display:block; (2). float:left; 2.设置下拉菜单,最 ...

  10. html/css 实现下拉菜单效果

    demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. PHP获取客户端IP

    /** * 获取客户端IP */ function getClientIp() { $ip = 'unknown'; $unknown = 'unknown'; if (isset($_SERVER[ ...

  2. [BootStrap] 富编辑器，基于wysihtml5

    在我的周围,已经有很多人在使用BootStrap,但对于任何一个带留言.评论.提问.文章编辑功的网站,编辑器永远是重中之重,显然,早期的编辑器完全没考虑过BootStrap的出现,或皮肤跟网站不匹配, ...

  3. JDK动态代理

    一.基本概念 1.什么是代理? 在阐述JDK动态代理之前,我们很有必要先来弄明白代理的概念.代理这个词本身并不是计算机专用术语,它是生活中一个常用的概念.这里引用维基百科上的一句话对代理进行定义: A ...

  4. 获取打开的Word文档

    using Word = Microsoft.Office.Interop.Word; int _getApplicationErrorCount=0; bool _isMsOffice = true ...

  5. asp.net core 负载均衡集群搭建（centos7+nginx+supervisor+kestrel）

    概述 本文目的是搭建三台asp.net core 集群, 并配上 nginx做负载均衡   首先准备要运行的源码 http://pan.baidu.com/s/1c20x0bA 准备三台服务器(或则虚 ...

  6. Win10连接远程桌面时提示“您的凭据不工作”

    我遇到这个问题的时候查找网上都给出一堆高大上的解决办法, 然而我的错误实际上是用户名的问题, 很多人以为远程用户名就一定是锁屏状态下的登录名, 其实不是,跟自己设置有关,所以首先应该检查远程用户名是否 ...

  7. Harmonic Number(调和级数+欧拉常数)

    题意:求f(n)=1/1+1/2+1/3+1/4-1/n   (1 ≤ n ≤ 108).,精确到10-8    (原题在文末) 知识点:      调和级数(即f(n))至今没有一个完全正确的公式, ...

  8. 【第三篇】ASP.NET MVC快速入门之安全策略（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  9. 一步步开发自己的博客 .NET版（5、Lucenne.Net 和 必应站内搜索）

    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...

  10. java遇到 Check $M2_HOME 问题 解决-Dmaven.multiModuleProjectDirectory system property is not set. Check $M2_HOME environment variable and mvn script match.

    步骤: 1.添加M2_HOME的环境变量 2.Preference->Java->Installed JREs->Edit 选择一个jdk 3.添加 -Dmaven.multiMod ...