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

<!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. 让PHP更快的提供文件下载 【转】

    一般来说, 我们可以通过直接让URL指向一个位于Document Root下面的文件, 来引导用户下载文件. 但是, 这样做, 就没办法做一些统计, 权限检查, 等等的工作.  于是,  很多时候,  ...

  2. Xamarin.Forms中 Navigation,NavigationPage详解

    1.Xamarin Forms下有四个成员类:Element,VisualElement,Page,NavigationPage 基类为Element,继承的子类分别是VisualElement,Pa ...

  3. jenkins+windows+springboot+.net项目自动化部署图文教程

    之前一直在linux中使用jenkins部署程序,正好现在的项目包括了winfrom程序,所以需要部署到windows系统中 jenkins官网:https://jenkins.io/ 下载之后运行j ...

  4. 常用的jQuery学习文档及使用经验

    分享几个jQuery学习的API在线文档 1. 首推 http://hemin.cn/jq/ 原因是全中文文档,文档排列通俗易懂,容易查找,示例清楚. 2. https://www.jquery123 ...

  5. oracle数据库中将clob字段内容利用java提取出至文本文档中

    代码段: 1.执行clob转String public static String ClobToString(Clob sc) throws SQLException, IOException { S ...

  6. 参照跟老男孩学linux运维搭建nagios实验小结

        nagios效果示例 http://192.168.0.236/nagios       用户名:hong     密码:123   一. 服务端安装准备   1. 更新源 cd /etc/y ...

  7. typescript项目中import 图片时报错：TS2307: Cannot find module ‘...’

    最近在用typescript写项目时,我用import来加载一个图片,webpack编译文件是会报错如下: 报错: 解决: 如果在js中引入本地静态资源图片时使用import img from './ ...

  8. sap server笔记

    system 就是sap hana database,如果一个system有多个instance,则必须分散到不同的host中,每个system有唯一的sid. hello各位,jackie建议我们去 ...

  9. appium+android各配置参数获取'platformName'、'platformVersion'、appActivity、deviceName、webdriver.Remote

    图中1的获取--'platformName'.'platformVersion' 点击appium右上角的运行按钮,可通过上面查看platformName 和 platformVersion 平台版本 ...

  10. 01-复杂度2 Maximum Subsequence Sum （25 分)

    Given a sequence of K integers { N​1​​, N​2​​, ..., N​K​​ }. A continuous subsequence is defined to ...