<style type="text/css">

* {     margin: 0px;     padding: 0px;     font-family: "微软雅黑";    }

#top1{ width:100%px;           height:40px;        background-color:#9C9;        }

#top2{      height:40px;           width:400px;        margin:0px auto;      }

#nav-top {     height: 40px;     width: 400px;     background-color: #1abc9c;     color: white;     border-radius: 5px;     float:left;    }

li {     color: black;     list-style: none;     background-color: #ecf0ff;    }

.nav-btn {     width: 100px;     float: left;     line-height: 40px;     text-align: center;     overflow: hidden;     border-radius: 5px;     max-height: 40px;    }    li:hover{     background-color: #1ABC9C;    }

.nav-btn:hover{     background-color: cornflowerblue;     cursor: pointer;     max-height: 500px;     transition: 1s;    }

</style>

<body>

<div id="top1">

　　<div id="top2">

　　　　<div id="nav-top">

　　　　　　<div class="nav-btn">1

　　　　　　　　 <ul>

　　　　　　　　 　　<li>111</li><li>222</li><li>333</li>

　　　　　　　　</ul>

　　　　　　 </div>

　　　　　　　<div class="nav-btn">2

　　　　　　　　<ul>

　　　　　　　　　　<li>222</li><li>333</li><li>444</li>

　　　　　　　　</ul>

　　　　　　　</div>

　　　　　　</div>

　　　　</div>

　　</div>

</body>

13 用Css做下拉菜单的更多相关文章

  1. CSS的下拉菜单被挡住，修改Z-INDEX也不成功

    CSS的下拉菜单被挡住,修改Z-INDEX也不成功 做了一个鼠标放上去就出现的下拉菜单,但是这个下拉的内容被挡住了. Z-INDEX 是设置不同块的层次的,我修改了问题还是有. 后来发现是必须要把该便 ...

  2. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  3. HTML+CSS写下拉菜单

    今天学习了使用HTML+CSS实现下拉菜单效果,在这个例子中,我学到了如下知识点: 设置背景图片(background-image.background-size) 如何让无序列表横向显示(float ...

  4. CSS实现下拉菜单的几种方法

    PS:转自https://www.cnblogs.com/yewenxiang/p/6064117.html 第一种:display:none和display:block切换 1 <!DOCTY ...

  5. 纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

    虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...

  6. 纯css实现下拉菜单

    今天给大家分享一个纯html+css实现的下拉菜单.在此声明一点,源码并非出自本人之手,是同项目组一兄弟PLUTO写的.好东西嘛,所以果断拿出来和大家分享.如果有更好的想法或者建议,一定记得留言哦!好 ...

  7. 纯洁CSS实现下拉菜单和下拉容器（纯洁CSS导航栏和导航下拉容器）

    虽然网上课程似即使案件大同小异,但我还是写,记笔记,也为您提供参考 我希望你能指导批评~~ 首先,我们必须列出ul li 开始我们的导航栏菜单也能说生产: 在下面的页面,我们先建XHTML结构体: & ...

  8. html5 css练习 下拉菜单制作

    *{    margin: 0;    padding: 0;}li{    list-style-type: none;}a{    text-decoration: none;}.ul1{marg ...

  9. 用纯css实现下拉菜单的几种方式

    第一种:display:none和display:block切换 <!DOCTYPE html> <html lang="en"> <head> ...

随机推荐

  1. crash部分命令用法

    Set set [pid | taskp | [-c cpu] | -p] | [crash_variable [setting]] | -v 1.设置要显示的内容,内容一般以进程为单位. Set p ...

  2. 32位机器的LowMemory

        今天在和供应商交流的过程中,被严重鄙视了,竟然认为我连"LowMemory"都没有听说过.感觉很郁闷,好歹我也搞过一段时间memory Management,怎么可能连Lo ...

  3. JVM 堆内存，参数优化

    Java堆内存 http://www.importnew.com/19593.html JVM诊断之查看运行参数 JVM 垃圾回收器工作原理及使用实例介绍 https://www.ibm.com/de ...

  4. 详细解剖大型H5单页面应用的核心技术点

    项目 Xut.js 阐述下开发中一个比较核心的优化技术点,这是一套平台代码,并非某一个插件功能或者框架可以直接拿来使用,核心代码大概是6万行左右(不包含任何插件) .这也并非一个开源项目,不能商业使用 ...

  5. 一起来学jquery!

    jquery学习之旅!(未完待续) ------------(一)jquery书写步骤 ------------(二)jquery事件与函数 ------------(三)jquery修改css属性 ...

  6. Java Socket应用---通信是这样练成的

    网络基础简介 Java 中网络相关 API 的应用     Java 中的 InetAddress 的应用   Test01.java package com.imooc; import java.n ...

  7. OC分类(Category)

    Category 分类 ,又称为类别.类目 概念 Category有多种翻译:分类.类别.类目(一般叫分类的多) Category式OC特有的语法,其他语言没有的语法(类似于C#语言中的"扩 ...

  8. mysql sql语句

    1.数据库和表的操作 创建 create修改 alter删除 drop查看 show 1.1创建数据库 CREATE DATABASE [IF NOT EXISTS] db_name    [crea ...

  9. JS常用方法【私房菜-笔记】-持续整理中

    //记录一下前端开发中 JS常用的方法等,持续收集整理中 ---------------------------------------------------------- //处理键盘事件 禁止后 ...

  10. 深入浅出理解yield

    索引 转载部分内容来自:http://www.jianshu.com/p/d09778f4e055 [彻底理解yield] http://blog.csdn.net/haskei/article/de ...