<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. bootstrap快速入门笔记（三）响应式，行,列，偏移量，排序

    一,响应式列重置 .clearfix <div class="row"> <div class="col-xs-6 col-sm-3"> ...

  2. Java中双向链表的代码实现

    写在前面: 双向链表是一种对称结构,它克服了单链表上指针单向性的缺点,其中每一个节点即可向前引用,也可向后引用,这样可以更方便的插入.删除数据元素. 由于双向链表需要同时维护两个方向的指针,因此添加节 ...

  3. mysql 关联查询 索引不起作用原因记录

    业务逻辑如下:查询某篇文章的评论列表,且列出评论人及被评论人的昵称.头像. 先看一下表结构 评论表: 评论表的索引: 用户表: 用户表的索引: 查询语句如下: SELECT t1.comment_id ...

  4. PHP count() 函数

    count() 函数计算数组中的单元数目或对象中的属性个数. 对于数组,返回其元素的个数,对于其他值,返回 1.如果参数是变量而变量没有定义,则返回 0.如果 mode 被设置为 COUNT_RECU ...

  5. 在Angular项目下使用Umeditor

    Umeditor是百度旗下的开源富文本编辑器项目,目前用于百度贴吧,是ueditor的迷你版本. 公司的Angular后台管理项目需要上传一些新闻,用Umeditor十分适合.但是目前官方只提供Jsp ...

  6. 关于jstl.jar引用问题及解决方法

    在前文SSM说到因为从MyEclipse换成了Eclipse.有些架包自动缺失. 造成:"org.apache.jasper.JasperException: This absolute u ...

  7. 使用OpenOffice实现各种文档转pdf或者html文档

    ---恢复内容开始--- 最近在做项目时需要写一个功能,将doc,ppt,xsl等文档做在线预览.网上查了很多资料,开始适用poi将文档转成pdf没成功,后来使用了OpenOffice4 + jodc ...

  8. Java：构造器，构造代码块，静态代码块的执行顺序

    1.构造器:与类同名且没有返回值,用来初始化类属性: 构造器又分为无参构造器和有参构造器 1.1:无参构造器 public class Contruction{ ...属性... public Con ...

  9. 【2017-05-05】timer控件、三级联动、帐号激活权限设置

    一.Timer控件 Timer实际就是一个线程控件. 属性:Enabled    是否被启用 Interval     多长时间执行一次控件中的代码 事件: Tick     事件中放要执行的代码. ...

  10. jQuery手风琴菜单！！！！

    jQuery手风琴菜单 第一次发博客也不知道说点什么好,以前敲得一个手风琴菜单刚刚整理出来了,就来分享个大家 手风琴的排版 排版完事了,接下来就写样式吧,把自己喜欢的颜色或者是图片添加进来,就会变成你 ...