动态网站第一步：动态下拉菜单

关键点：

overflow:hidden

max-height

xx:hover {} 设置当鼠标移上之后的效果

transition:   设置过度时间

cursor:  设置鼠标效果

opacity: 设置透明度 0-1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
list-style:none ;
font-family:"微软雅黑";
text-shadow: royalblue 5px 5px;            /* 阴影*/
}
.top-nav,#nav-lv1{
border-radius: 10px;                       /*边框为圆形*/
}
.top-container{
width: 100%;
height:40px;
background-color: cyan;
position: relative;
}
.top-nav{
width: 600px;
height: 40px;
margin:0px auto;                   /*居中*/
position: relative;
}
#nav-lv1{
width: 150px;
max-height:40px;                    /*最大高度*/
background-color: palegreen;
float: left;
text-align: center;
vertical-position: middle;
line-height: 40px;
overflow: hidden;               /*实现动态导航栏关键点*/
}
#nav-lv1:hover{
max-height: 400px;                 /*最大高度*/
transition: 1s;                    /*过度效果*/
cursor:pointer;                          /* 鼠标改小手*/
background: greenyellow;

}
#nav-lv1 li:hover{
background-color: greenyellow;
text-decoration: underline;
}
#nav-lv1 ul{
background-color: white;
opacity: 0.9;                            /* 设置透明度* 目的是防止挡住底下的文字/
}
</style>

</head>
<body>
<div class="top-container">
<div class="top-nav">
<div id="nav-lv1">HTML
<ul>
<li>1</li>                                    <!--可换成<a></a>标签-->
<li>2</li>
<li>31</li>
<li>41</li>
</ul>
</div>
<div id="nav-lv1">JavaScript
<ul>
<li>1</li>
<li>31</li>
<li>41</li>
</ul>
</div>
<div id="nav-lv1">CSS
<ul>
<li>1</li>
<li>2</li>
<li>41</li>
</ul>
</div>
<div id="nav-lv1">Jquery
<ul>
<li>1</li>
<li>2</li>
<li>31</li>
<li>41</li>
</ul>
</div>
</div>
</div>
</body>
</html>

CSS写动态下拉菜单 -----2017-03-27的更多相关文章

  1. 经典的 div + css 鼠标 hover 下拉菜单

    经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...

  2. CSS 实现样式下拉菜单

    下拉菜单的实现 脚本: <script type="text/javascript"> function ShowSub(li) { ]; ; subMenu.styl ...

  3. js和jQuery写简单下拉菜单

    1.jQuery写法 <head> <meta http-equiv="Content-Type" content="text/html; charse ...

  4. 纯css实现横向下拉菜单

    自己最近在捣腾css代码,不光是js能做很多有趣的东西,这货也可以做很多东西,现在把自己的一些作品分享给大家. 做得有点粗糙,大家根据这个思路来,可以自己修改修改. 关于demo:这是一个横向下拉的菜 ...

  5. JavaScript+CSS+DIV实现下拉菜单示例

    <!DOCTYPE html> <html> <head> <title>下拉菜单示例</title> <script languag ...

  6. iphone动态下拉菜单

    介绍:实现带动画效果的下拉菜单.用户按下菜单按钮,出现下拉按钮,用户松开菜单按钮,下拉按钮收回. 测试环境:Xcode 4.3, iOS 5.0. 效果图: jQuery特效:http://www.h ...

  7. CSS打造三级下拉菜单

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  8. 用css写出下拉框（代码转自wq群）

    做网易云音乐首页时遇到的问题,鼠标指在右上角头像时出现下拉框. <style>/* css*/ #body{ float: left; } #xialakuang{ background- ...

  9. css制作简单下拉菜单

    要点:定位,隐藏,显示. (一)先建一个两次列表 <ul id="ul1"> <li>首页</li> <li>第二页 <ul& ...

随机推荐

  1. C#操作XML方式

    前言 前一篇XML读取,现在咱们继续XML操作相关 C#中也有三种操作(增.删.改.查)XML文件方法如下: 使用 XmlDocument(DOM模式) 使用 XmlTextWriter(流模式) 使 ...

  2. Swift 2.0 单例的用法

    单例我们项目中是很常用的,今天刚学了在swift中怎么写单例和调用单例.下面我们简单的介绍一下.我们先看看Swift单例的写法: import UIKit class Shareinstance: N ...

  3. OSGI框架中通过BundleContext对象对服务的注册与引用

    BundleActivator 在每个Bundle新建时都会默认生成Activator类,该类实现了BundleActivator类,实现了其start()和stop()两个方法 BundleCont ...

  4. enote笔记语言（3）（ver0.2）

    what&why(why not)&how&when&where&which:紫色,象征着神秘而又潜蕴着强大的力量,故取紫色. key&keyword: ...

  5. 浅谈Activiti Modeler 的扩展

    为什么要扩展         最近项目打算用activiti工作流中activiti modeler来做模块的可视化订阅,但是原生的activiti任务节点,有一些不符合业务需要,比如 配置项多,属性 ...

  6. hadoop-hdfs体系结构

    HDFS作为Hadoop的核心技术之一,HDFS(Hadoop Distributed File System, Hadoop分布式文件系统)是分布式计算中数据存储管理的基础.具有高容错高可靠性.高可 ...

  7. ubuntu文件目录详细介绍

    /bin 二进制可执行命令 /dev 设备文件(硬盘/光驱等) /etc 系统管理和配置文件 /etc/rc.d 启动的配置文件和脚本 /home 用户主目录,下面会有以登录用户名作为文件夹名的各文件 ...

  8. 【开源】NodeJS仿WebApi路由

    用过WebApi或Asp.net MVC的都知道微软的路由设计得非常好,十分方便,也十分灵活.虽然个人看来是有的太灵活了,team内的不同开发很容易使用不同的路由方式而显得有点混乱. 不过这不是重点, ...

  9. 一张图理解RACSignal的Subscription过程

    通过下面一张图理解RACSignal的调用过程: 创建signale RACSignal通过子类[RACDynamicSignal createSignal:]方法获得Signal,并将disSubs ...

  10. 每天一个linux命令(56)--crontab命令

    上一节学习了 at  命令是针对仅运行一次的任务,循环运行的例行性计划任务,Linux 系统则是由 cron(crond)这个系统服务来控制的.Linux 系统上面原本就有非常多的计划性工作,因此这个 ...