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

<!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. 学习笔记之Struts2—浅析接收参数

    最近自己通过视频与相关书籍的学习,对action里面接收参数做一些总结与自己的理解. 0.0.接收参数的(主要)方法   使用Action的属性接收参数 使用DomainModel接收参数 使用Mod ...

  2. solr7.4 centos7安装

    环境:centos7.JDK1.8.solr 自带Jetty启动 一.安装JDK1.8环境 1.下载JDK jdk-8u172-linux-x64.rpm 下载地址:http://www.oracle ...

  3. UML uml基础知识

    uml基础知识 一.了解: uml是Unified Modeling Language的缩写,意思是统一建模语言或标准建模语言. UML规范用来描述建模的概念有,类(对象的).对象.关联.职责.行为. ...

  4. MongoDB复制集与Raft协议异同点分析

    此文已由作者温正湖授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 一.日志复制流程: a.raft leader节点在接收client请求后,先将请求写到日志中,再将日志通过 ...

  5. nowcoder(牛客网)OI测试赛3 解题报告

    昨天因为胡搞了一会儿社团的事情,所以错过(逃过)了nowcoder的测试赛..... 以上,听说还是普及组难度qwq,而且还有很多大佬AK(然而我这么蒻肯定还是觉得有点难度的吧qwq) 不过我还是日常 ...

  6. 支付机构MRC模

    一.电商RFM模型 RFM模型是一个简单的根据客户的活跃程度和交易金额贡献所做的分类.因为操作简单,所以较为常用. 近度R:R代表客户最近的活跃时间距离数据采集点的时间距离,R越大,表示客户越久未发生 ...

  7. “全栈2019”Java第四十四章：继承

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  8. [ActionScript 3.0] 如何控制加载swf动画的播放与暂停

    此方法适用于用as 1.0或者as2.0以及as3.0编译的swf,因为as1.0和as2.0编译的swf是AVM1Movie类型,因此需要通过类ForcibleLoader.as将其转换为versi ...

  9. [ActionScript 3.0] 嵌入字体

    首先我们要生成一个swf的字体库,以微软雅黑为例,新建YaHei_font.fla,ctrl+L,在库面板中右键→新建字型,弹出字体元件属性窗口,选择要嵌入的字体, 并选择为ActionScript ...

  10. Oracle数据库中日期/数字和字符之间的转换和计算

    --查出当前系统时间 select SYSDATE from table; --格式转换 -- TO_CHAR 把日期或数字转换为字符串 -- TO_CHAR(number, '格式') -- TO_ ...