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

关键点：

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. 情人节，教大家使用css画出一朵玫瑰花。

    情人节到了,给大家来一朵高端的玫瑰花. 在网上看到的一个canvas实现的玫瑰花,效果很好,但是代码被压缩过,也没有注释,看的云里雾里的. 今天我教大脚用CSS来实现一朵玫瑰花. 先看效果 首先我们画 ...

  2. matlab图像显示程序模板

    在这个程序中:优秀的模板值得学习,变量的定义字典值得学习 .^ .* ./的使用:        图形的显示及标注 % 脚本文件: 功率计算 % 文件名:cac_power.m % 目标:随着电阻值的 ...

  3. Ubuntu纯字符界面的一些设置

    由于Ubuntu的纯字符界面不支持中文显示,所以进行了一些配置,为了更好的显示 1. 把环境语言配置为英文 在用户目录下的".bashrc"文件的结尾处添加以下内容,然后重新登录 ...

  4. JAVA中的数据结构 - 1，红黑树

    背景: 在JDK源码中, 有treeMap和JDK8的HashMap都用到了红黑树去存储 红黑树可以看成B树的一种: 二叉树-->搜索二叉树-->平衡搜索二叉树-->B树--> ...

  5. JavaScript中的this关键字的用法和注意点

    JavaScript中的this关键字的用法和注意点 一.this关键字的用法 this一般用于指向对象(绑定对象); 01.在普通函数调用中,其内部的this指向全局对象(window); func ...

  6. UML类图中的关系和表示方法

    类图是用来描述程序中的类以及它们之间的关系的,使用类图可以帮助我们简化对系统的理解.在UML类图中比较常见的关系有六种,它们分别是:依赖.关联.聚合.组合.泛化.实现,这六种关系中类之间的紧密程度是依 ...

  7. 【UWP】FFmpeg库的编译

    本文是关于windows8.1/windows10通用应用下编译ffmpeg的一些需要注意的地方,针对最新的msys2而写,都是我在实际操作中遇到的,但是网上没有提到的.如果大家遇到什么问题或是在之前 ...

  8. 2-23c#基础循环语句

    循环语句 必须具备四要素:初始条件.循环条件.循环体.状态改变 for (初始条件; 循环条件; 状态改变)    {  循环体} 简单举例 for(int i=1;i<=10;i++)//就是 ...

  9. 每天一个linux命令(41)--ping命令

    Linux系统的 ping 命令是常用的网络命令,它通常用来测试与目标主机的连通性,它通过发送 ICMP ECHO_REQUEST数据包到网络主机(send  ICMP  ECHO_REQUEST t ...

  10. ThinkPhp知识大全（非常详细）

    php框架 一.真实项目开发步骤: 多人同时开发项目,协作开发项目.分工合理.效率有提高(代码风格不一样.分工不好) 测试阶段 上线运行 对项目进行维护.修改.升级(单个人维护项目,十分困难,代码风格 ...