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

关键点：

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. 11G内存设置一例

    11G的内存设置参数有memory_target.memory_max_target.sga_target.pga_aggregate_target等. 一个特别繁忙的数据库,前期内存设置较低,物理内 ...

  2. stringBuffer的使用及字符串比较的区别

    /* * 关于equals()和==: 对于String简单来说就是比较两字符串的Unicode序列是否相当,如果相等返回true; * 而==是比较两字符串的地址是否相同,也就是是否是同一个字符串的 ...

  3. 自己动手系列——实现一个简单的LinkedList

    LinkedList与ArrayList都是List接口的具体实现类.LinkedList与ArrayList在功能上也是大体一致,但是因为两者具体的实现方式不一致,所以在进行一些相同操作的时候,其效 ...

  4. EF操作扩展之async

    EF的操作类网上很多类,我只是把我在平时项目中的类进行一些改进和扩展,扩展了部分同步和异步的EF操作 接口 /// <summary> /// 接口数据操作基础类 /// </sum ...

  5. web前端简介

    Web标准: 结构(硬件):xhtml html 表现(软件):css 行为(插件):dom  js html:超文本标记语言 (Hyper Text Markup Language) xhtml:可 ...

  6. 从C#到TypeScript - Generator

    总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...

  7. TCP协议详解

    TCP协议详解 一.TCP协议 1.TCP 通过以下方式提供可靠性: ·  ◆ 应用程序分割为TCP认为最合适发送的数据块.由TCP传递给IP的信息单位叫做报文段. ·  ◆ 当TCP发出一个报文段后 ...

  8. Linux下ifort的安装记录

    首先进入网址https://software.intel.com/en-us/qualify-for-free-software/student 下载Intel Parallel Studio XE ...

  9. UWP: ListView 中与滚动有关的两个需求的实现

    在 App 的开发过程中,ListView 控件是比较常用的控件之一.掌握它的用法,能帮助我们在一定程度上提高开发效率.本文将会介绍 ListView 的一种用法--获取并设置 ListView 的滚 ...

  10. XML入门知识

    什么是XML? 答:指可扩展标记语言(eXtensible Markup Language),被设计用来传输和存储数据:标签没有被预定义.您需要自行定义标签:被设计为具有自我描述性. XML和HTML ...