<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. JS模式---命令模式

    var opendoor = { execute: function () { console.log("开门"); } }; var closedoor = { execute: ...

  2. EverythingAboutJava

    1 GC gabage collection 垃圾回收Java GC系列(1):Java垃圾回收简介 http://mp.weixin.qq.com/s?src=3&timestamp=149 ...

  3. ssh整合时报出的异常及解决办法

    com.opensymphony.xwork2.inject.DependencyException: com.opensymphony.xwork2.inject.ContainerImpl$Mis ...

  4. 用 Python 编写网络爬虫 笔记

    Chapter I 简介 为什么要写爬虫? 每个网站都应该提供 API,然而这是不可能的 即使提供了 API,往往也会限速,不如自己找接口 注意已知条件(robots.txt 和 sitemap.xm ...

  5. Quartz (二) 和Spring整合

    先给个场景:每五分钟扫描并关闭7天未付款的订单 1.quartz pom.xml依赖 <dependencies> <dependency> <groupId>or ...

  6. Linux下Hadoop2.7.1集群环境的搭建（超详细版）

                                本文旨在提供最基本的,可以用于在生产环境进行Hadoop.HDFS分布式环境的搭建,对自己是个总结和整理,也能方便新人学习使用. 一.基础环境 ...

  7. MongoDB基础教程系列--未完待续

    最近对 MongoDB 产生兴趣,在网上找的大部分都是 2.X 版本,由于 2.X 与 3.X 差别还是很大的,所以自己参考官网,写了本系列.MongoDB 的知识还是很多的,本系列会持续更新,本文作 ...

  8. linux下fdisk分区管理、文件系统管理、挂载文件系统等

    分区管理工具有:fdisk, parted, sfdisk fdisk:对于一块硬盘来讲,最多只能管理15分区: # fdisk -l [-u] [device...]  查看硬盘设备分区信息 # f ...

  9. Oracle 12C 新特性之表分区部分索引(Partial Indexes)

    12c之前没办法在部分或指定的分区上创建索引,12c 版本中引入了Partial Indexes(部分索引), 无论是global还是local都可以有选择性的对部分分区创建索引.分区上有索引用索引, ...

  10. Day1-用户输入及字符串格式化输入

    1.用户输入--input和getpass函数 2.字符串的格式化 ############################################# 一.用户输入--input()函数 #! ...