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

关键点：

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. Windows Container 和 Docker：你需要知道的5件事

    微软在2016年的Ignite技术大会上正式发布了Windows Server 2016,其中的容器服务已经可以作为生产环境使用.这意味着Windows 内置的容器服务正式进入了大家的视野,虽然之前我 ...

  2. MongoDB学习总结(四) —— 索引的基本用法

    说到索引,大家肯定都在关系型数据库或多或少接触过,它的主要目的是加速查询的速度.MongoDB作为一种数据库,当然也提供了索引的操作. 我们先插入1万条测试数据. 首先,我们先来看看不加索引查找nam ...

  3. PCB信号集

    每一个进程都有一个pcb进程控制块,用来控制进程的信息,同时信号在pcb中有两个队列去维护他,一个是未决信号集,每一位对应一个信号的状态,0,1,1表示未决态,另一个是信号屏蔽字(阻塞信号集),也就0 ...

  4. Spring MVC 教程(比较全的一篇文章了)

    http://elf8848.iteye.com/blog/875830 11年1月份的文章,但是Spring3,现在是4,不过还是很实用

  5. Giraph入门

    概要 这是一个Giraph的入门教程,主要用来运行少量输入的Giraph程序,并不能用于生产环境. 在这个教程中,我们将会在一个物理机器行部署一个单节点,伪分布的Hadoop集群.这个节点既是mast ...

  6. AlloyTouch之select选择插件

    原文地址:https://github.com/AlloyTeam/AlloyTouch/wiki/Simple-Select 写在前面 很多情况下,产品希望统一安卓和IOS select交互和样式. ...

  7. where T：class的含义（ where约束）

    public void Request<T>(List<T> EntityList) where T : class { } 这是参数类型约束,指定T必须是Class类型.   ...

  8. 每天一个Linux命令（05）--rm命令

    自从学会了用mkdir创建目录之后,整个系统里就只能看到一堆空目录了,囧~ 那么今天我们来学一下如何清理这些空目录吧--rm命令,该命令的功能为删除一个目录中的一个或多个文件或目录,它也可以将某个目录 ...

  9. python 写的几道题

    ''' #乘法口诀''' for i in range(1,10): for j in range(1,i+1): print("%d*%d=%2d" % (i,j,i*j),en ...

  10. 关于input只能输入数字的两种小方法

    第一种: 直接给input标签 name赋值如下 <input name="start_price" id="start_price" type=&quo ...