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

关键点：

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. 获取当前用户的网络状态--iOS

    http://m.blog.csdn.net/blog/u014483033/39229417

  2. block之---数据传递

    block值传递分为两种情况 1.值传递 含义: 类似于函数参数的值传递,block内部对值的改变对外部没有影响,外部改变对block内部也没有影响. 情况 block访问外部局部变量没有被任何关键字 ...

  3. Asp.Net MVC学习总结（一）——Asp.Net MVC简单入门

    一.MVC简单入门 1.1.MVC概念 视图(View) 代表用户交互界面,对于Web应用来说,可以概括为HTML界面,但有可能为XHTML.XML和Applet. 模型(Model) 表示用户对其数 ...

  4. bugly集成了Tinker热更新

    介绍 热更新能力是Bugly为解决开发者紧急修复线上bug,而无需重新发版让用户无感知就能把问题修复的一项能力.Bugly目前采用微信Tinker的开源方案,开发者只需要集成我们提供的SDK就可以实现 ...

  5. php in_array语法

    bool in_array ( mixed $needle , array $haystack [, bool $strict ] ) 返回值为直或假       var_dump(in_array( ...

  6. 【转载】HTTP Cookie学习笔记

    什么是cookie? cookie是什么?是饼干,小甜点? No! No! No! 我今天要总结的cookie并不是你所想的小甜心,我这里要说的cookie是Web开发中的一个重要的"武器& ...

  7. java生成二维码

    具体代码如下,作为一个新手,期待与你一起交流: import java.awt.Color; import java.awt.Graphics2D; import java.awt.image.Buf ...

  8. 动态添加删除网卡 - 每天5分钟玩转 OpenStack（156）

    这是 OpenStack 实施经验分享系列的第 6 篇. 在项目实施过程中,经常会有添加删除网卡的需求.比如一个运行数据库的 instance,初始只有一个网卡,数据库服务和备份共用这块网卡,后来为提 ...

  9. loadrunner测试结果分析

    LR性能测试结果样例分析 测试结果分析 LoadRunner性能测试结果分析是个复杂的过程,通常可以从结果摘要.并发数.平均事务响应时间.每秒点击数.业务成功率.系统资源.网页细分图.Web服务器资源 ...

  10. 编程思想之——"人是活的，程序是死的"

    "人是活的,程序是死的"这句话我时常提起,可能很多人不是很理解我为什么会这样说,下面我就简单来谈谈我对这句话的理解. 1.不要因为技术而技术,技术选型的初衷是需求. 现在很多人在做 ...