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

<!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. 微信开发之c#下jssdk签名生成

    参考文章 :微信JS-SDK 权限签名算法 C#版 这篇文章讲解的的比较详细,而且算法准确,但是这篇文章有几个错误的地方需要注意; url必须动态生成 url不能写死,否则就算结果和官方检测的一致,也 ...

  2. python学习之路 七 ：生成器、迭代器

    本节重点: 掌握列表生成式.生成器.迭代器 一.生成式 ​现在有个需求,把[1,2,3,4,5,6,7,8,9,10]中的每个值加1. # 二逼青年版 a = [0,1,2,3,4,5,6,7,8,9 ...

  3. [SinGuLaRiTy] 关于博客

    由于博主主要使用Chrome内核的浏览器进行博客页面的代码优化,因此有些功能可能会因为浏览器的差异而无法正常运行,博主对此也非常无奈啊:Windows的IE浏览器的兼容性实在是太差了...... 尽管 ...

  4. P4098 [HEOI2013]ALO 可持久化01Trie

    $ \color{#0066ff}{ 题目描述 }$ Welcome to ALO ( Arithmetic and Logistic Online).这是一个 VR MMORPG, 如名字所见,到处 ...

  5. c语言数据结构学习心得——二叉树

    二叉树 n(n>=0)个结点的有限集合:(五种形态) 1.或者为空二叉树,n=0: 2.或者由一个根结点和两个互不相交的被称为根的左子树和右子树组成.左子树和右子树又分别是一棵二叉树. 3.每个 ...

  6. POJ-2387-Til the Cows Come Home（最短路）

    Til the Cows Come Home Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 72844   Accepted ...

  7. Supreme(ง •̀_•́)ง

    1.数学: 4月底18讲看完. 5月书上重点习题再过一遍(注证明题,最值,平均值,有界,介值,零点定理,等式不等式,极限,中值定理(费马,罗尔,拉格朗日,泰勒,柯西,一元积分中值定理,二重积分中值定理 ...

  8. DEM反应添加顺序注意问题

    在含有DEM反应的dat中,均相反应的block要在DEM反应之前,例如: @(RXNS) (some reaction equations) @(END) @(DES_RXNS) (some rea ...

  9. Angular material mat-icon 资源参考_Navigation

    ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...

  10. Keras中间层输出的两种方式，即特征图可视化

    训练好的模型,想要输入中间层的特征图,有两种方式: 1. 通过model.get_layer的方式.创建新的模型,输出为你要的层的名字. 创建模型,debug状态可以看到模型中,base_model/ ...