<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. WPF触屏Touch事件在嵌套控件中的响应问题

    前几天遇到个touch事件的坑,记录下来以增强理解. 具体是 想把一个listview嵌套到另一个listview,这时候如果list view(子listview)的内容过多超过容器高度,它是不会出 ...

  2. SublimeText3编译JavaScript

    这个操作很简单总的来说分为两步,1.安装Node.js  2.添加SublimeText3 JS编译系统 首先我们去官网下载node.js https://nodejs.org/en/ 然后安装 验证 ...

  3. vue组件（将页面公用的头部组件化）

    呃……重新捡起前面用vue-cli快速生成的项目. 之前是做过一个多页面的改造,以及引入vux的ui组件,这次在这个项目的基础上,再来聊聊vue中的component. 别问我为啥总是写关于vue的博 ...

  4. luogu 1521-求逆序对

    题意: 逆序对指在一个序列中ai>aj && i < j,也就是一前一后两个数,当大的在前面的时候即算一对. 题目求在一个由1-n组成的序列中逆序对为k的序列的个数. 出题 ...

  5. Hadoop的安装（日志四）

    上一篇:SSH免密码(日志三) 1,进入conf目录,查看所有的文件 2,第一个修改的是hadoop-env.sh的文件,配置javahome的地址 3,第二个就是配置core-site的文件,包括临 ...

  6. 工具类总结---（五）---SD卡文件管理

    里面注释很清楚了... package cgjr.com.cgjr.utils; import android.content.Context; import android.graphics.Bit ...

  7. 基于DotNet Core的RPC框架(一) DotBPE.RPC快速开始

    0x00 简介 DotBPE.RPC是一款基于dotnet core编写的RPC框架,而它的爸爸DotBPE,目标是实现一个开箱即用的微服务框架,但是它还差点意思,还仅仅在构思和尝试的阶段.但不管怎么 ...

  8. jQuery.validate表单校验+bootstrap

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  9. 配置nginx脚本开机自启动

    vi /etc/init.d/nginx 插入以下内容,修改红色字体自己安装路径 #!/bin/bash## chkconfig: - 85 15# description: Nginx is a W ...

  10. 【JAVAWEB学习笔记】15_request

    HttpServletRequest 学习目标 案例一.完成用户注册 案例二.完成登录错误信息的回显 1．HttpServletRequest概述 我们在创建Servlet时会覆盖service()方 ...