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

<!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. nutch2.1+mysql+elasticsearch整合linux单机部署

    这次主要介绍下nutch2.1和mysql和elasticsearch的整合,是在单机上运行,并不是分布式部署.1.下载nutch2.1 nutch下载地址:http://labs.mop.com/a ...

  2. for和$.each 的记录

    $.each(ForbidSDT, function (i, obj) { if ($(obj).val() <= 8) { alert("请输入禁止操作开始时间"); $( ...

  3. ftp服务器PDF文件在线查看

    曾做过电厂的项目,有一些功能需要和甲方的厂家对接,其中就有需要实现甲方ftp服务器上的PDF.JPG等文件的查看功能.就PDF文件为例,这里使用的是pdf插件,需要将参数通过链接发给ftp,获取到PD ...

  4. python基本算法

    算法优劣评判标准 时间复杂度: 定义:用来评估算法运行效率的一个式子 print('Hello World') O(1) for i in range(n): print('Hello World') ...

  5. Major Performance Impacts

    - Default opaque flags (3s) - Filter size (3s) - ??? (4s) - Image refresh performance (1s)

  6. ajax 跨域访问的解决方案

    ajax 跨域访问的解决方案 一.什么是跨域: 1.什么样的请求属于跨域: 域名,端口有任何一个不相同都属于跨域: 二.跨域的常用几种解决方案: 1.jsonp: 2.iframe: 3.webcon ...

  7. ItemTemplateSelector

    ItemTemplateSelector的中文翻译是模板选择器 是用来选择模板. 他的用法稍有不同,他必须派生于DataTemplateSelector类. 然后重写SelectTemplate这个方 ...

  8. kali linux之Msf-exploit模块，生成payload

    Exploit模块 Active exploit(主动地向目标机器发送payload并执行,使目标交出shell(反连等)) msf5 > use exploit/windows/smb/pse ...

  9. http错误状态码

    http://www.kaiyuanba.cn/html/1/131/226/4258.htm 状态代码有三位数字组成,第一个数字定义了响应的类别,且有五种可能取值:1xx:指示信息--表示请求已接收 ...

  10. P4365 [九省联考2018]秘密袭击coat

    $ \color{#0066ff}{ 题目描述 }$ Access Globe 最近正在玩一款战略游戏.在游戏中,他操控的角色是一名C 国士 兵.他的任务就是服从指挥官的指令参加战斗,并在战斗中取胜. ...