首先我们的需求就是 制作一个鼠标移动到某个区域就会有下拉菜单的弹出,这样会有更多的子类内容,示例代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

        }

        .title{

            background-color: #2b99ff;

            height: 50px;

            line-height: 50px;

            text-align: center;

            color: #3d2fa2;

        }

        .user{

            width: 180px;

            height: 50px;

            margin-left: 20px;

            background-color: #7a7b50;

            cursor: auto;

        }

        .user .msg{

            display: none;

            width: 200px;

            height: 40px;

            float: left;

            border: 1px solid red ;

            background-color: #787b53;

            z-index: 2;

            position: relative;

        }

        .user .msg a:hover{

            cursor: pointer;

        }

        .clearfix:after{

        content:"0";

        display: block;

        clear: both;

        visibility: hidden;

        height: 0;

        }

        .user:hover .msg{

            display: block;

        }

        .text{

            font-size: 30px;

            color: black;

            background-color: #99aecb;

            height: 800px;

            position: absolute;

            width: 1500px;

            z-index: 1;

        }

    </style>

</head>

<body>

    <div class="title">

        <div class="user clearfix">用户

            <div class="msg"><a>博客</a></div>

            <div class="msg"><a>闪存</a></div>

            <div class="msg"><a>积分</a></div>

            <div class="msg"><a>评论</a></div>

            <div class="msg"><a>关注</a></div>

        </div>

        <div class="text">文档内容</div>

    </div>

</body>

</html>

实现的方法: 首先先做一个html的标签,做个基本的样式出来,我们想把用户这个框鼠标触摸后有下拉菜单

做好后的效果:

要实现这个功能是要注意几个细节的 不然会做的四不像.

1,代码实现首先需要注意清除float的浮动.这样才能让下拉框的背景饱满 撑起来 这时候要看CSS中的 .clearfix:afttr 的方法 这个是固定内容 ,用来清除float.

2 ,     .user .msg 的display: none 这是首先用来隐藏下拉的几个标签 随后hover的时候 display会重新覆盖block;使其出现

3    这里注意,下拉菜单完成后 继续写后面的text菜单时弹出的画面其实是会被下方的text 标签覆盖的..这时候要注意text会覆盖弹出画面 显示不出来,因为他们是兄弟标签,所以我们可以给他们加上z-index的属性来改变层级,让前面的覆盖后面,(z-index必须要和position配合)

4  text这里加上了个position=absolute,如果不加 弹出菜单会影响文档流,让文档内容改变位置.

css用hover制作下拉菜单的更多相关文章

  1. css实现hover显示下拉菜单

    原理比较简单,首先先隐藏下拉菜单即display:none,当鼠标hover后,设置display:block. <style> .menu-title { postion: relati ...

  2. jQuery+Superfish制作下拉菜单

    superfish制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单. 官 ...

  3. 纯CSS实现二级导航下拉菜单--css的简单应用

    思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...

  4. 制作下拉菜单(PopupList)

    怎样判断是否应当使用下拉菜单 下拉菜单,就是将一系列的选项隐藏,通过单击某一个控件将会弹出一个包含这些选项的列表,在其中选择想要的选项.这样做不但可以节省屏幕空间,也可以让用户在进行选择时更加方便快捷 ...

  5. CSS3制作下拉菜单

    导航菜单其实是没有什么可说的,制作方法到处可见,今天这个案例本来不只是一个导 航,还有一个搜索表单的,可是为了偷懒,把搜索表单部分去掉了,就变成了一个CSS3 制作的下拉菜单.在这个导航中主要两点,一 ...

  6. 何使用CSS写出一个下拉菜单。

    导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢? 下面为大家分享一下我的经验 方法步骤: 第一步  : 首页我们打开Subli ...

  7. Css之导航栏下拉菜单

    Css: /*下拉菜单学习-2017.12.17 20:17 added by ldb*/ ul{ list-style-type:none; margin:; padding:; overflow: ...

  8. 纯css和js版下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. Html5+Css3制作下拉菜单的三种方式

    一.渐变式改变ol的高度 1.外部为ul标签,在每个li里嵌套一个ol列表2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位3.设置ol的高为0,溢出隐藏4.外部li标签:hover ...

随机推荐

  1. Delegate 　　Func　　Action　　Predicate default() 知识点

    看仓储模式,有代码写到这几个关键字,陌生,记录下来.       定义一个类型,此类型抽象化了相似结构的某一类方法,因此我们能将此类型代表的方法作为参数进行传递.      Delegate至少0个参 ...

  2. BP神经网络研究（一）

    本随笔参考文章:<BP神经网络详解与实例>(链接: https://pan.baidu.com/s/1e2niIvD9KtLXEqwXtgdXxw 密码: vb8d) 本随笔原创,转发请注 ...

  3. .net Timer定时执行

    System.Timers.Timer可以实现数据库定时更新的功能 Global.asax void Application_Start(object sender, EventArgs e) { / ...

  4. python字符串的切片

    # 字符串的切片 """ (5)字符串的切片 :切片就是截取字符串的意思 (1)语法 =>字符串[::] 完整格式:[开始索引:结束索引:间隔值 (2)[:结束索引 ...

  5. 实体bean里面不要轻易加transient，反序列回来之后会变成null

     实体bean里面不要轻易加transient,反序列回来之后会变成null

  6. 性能测试—认识JMeter（一）

     性能测试—认识JMeter(一) <零成本web性能测试>第二章 JMeter基础知识总结和自己的理解 一.JMeter百度词条概念 Apache JMeter是Apache组织开发的基 ...

  7. Docker部署常见问题

    一.删除容器和镜像 在删除镜像之前要先用 docker rm 删掉依赖于这个镜像的所有容器(哪怕是已经停止的容器),否则无法删除该镜像. 停止容器 # docker stop $(docker ps ...

  8. angular的一些思考

    来公司做的第一个产品就是用angularjs来写的 我对整体这个产品架构的理解: 这套系统做的做的目的是实现所有的功能可配置化,使用MVC模型,有model层,view层,和controller层,m ...

  9. 2016级算法第二次上机-B.Bamboo的OS实验

    Bamboo的OS实验 分析 首先理解题意,要完成不同数量的不同命令,但是完成相同的命令之间必须有n个间隔,为使得时间最短,自然优先用其他命令来填充这n分钟的时间,由于数量少的命令可以用来填充空隙,所 ...

  10. c++开发规范

    目录 1. 头文件 1.1. Self-contained 头文件 1.2. #define 保护 1.3. 前置声明 1.4. 内联函数 1.5. #include 的路径及顺序 2. 作用域 2. ...