爱编程爱分享，原创文章，转载请注明出处，谢谢！http://www.cnblogs.com/fozero/p/6187323.html

1、全部代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>使用纯CSS实现带箭头的提示框</title>

        <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

        <style>

            body {

                margin: 0;

                padding: 0;

            }

            .nav {

                background-color: #5CACEE;

                height: 78px;

                width: 100%;

                position: relative;

            }

            .nav img {

                cursor: pointer;

                position: absolute;

                right: 120px;

                top: 25px;

                width: 28px;

            }

            .nav .sub-nav {

                position: absolute;

                right: 40px;

                top: 72px;

                font-size: 9pt;

                display: block;

                width: 120px;

                background-color: transparent;

                *border: 1px solid #666;

            }

            .sub-nav s {

                position: absolute;

                top: -20px;

                *top: -22px;

                left: 20px;

                display: block;

                height: 0;

                width: 0;

                font-size: 0;

                line-height: 0;

                border-color: transparent transparent #dadada transparent;

                border-style: dashed dashed solid dashed;

                border-width: 10px;

            }

            .sub-nav s i {

                position: absolute;

                top: -9px;

                *top: -9px;

                left: -10px;

                display: block;

                height: 0;

                width: 0;

                font-size: 0;

                line-height: 0;

                border-color: transparent transparent #fff transparent;

                border-style: dashed dashed solid dashed;

                border-width: 10px;

            }

            .sub-nav .content {

                border: 1px solid #dadada;

                -moz-border-radius: 3px;

                -webkit-border-radius: 3px;

                position: absolute;

                background-color: #fff;

                width: 100%;

                *top: -2px;

                *border-top: 1px solid #666;

                *border-top: 1px solid #666;

                *border-left: none;

                *border-right: none;

                *height: 102px;

                box-shadow: 3px 3px 4px #999;

                -moz-box-shadow: 3px 3px 4px #999;

                -webkit-box-shadow: 3px 3px 4px #999;

                padding-right: 15px;

            }

            .sub-nav .content ul {

                list-style: none;

                margin: 0;

                padding: 0;

            }

            .sub-nav .content ul li {

                border-bottom: 1px solid #dadada;

                height: 38px;

                line-height: 38px;

                padding-left: 10px;

                overflow: hidden;

            }

            .sub-nav .content ul li:last-child {

                border-bottom: none

            }

        </style>

    </head>

    <body>

        <div class="nav">

            <img src="img/more.png" onmouseover="showNav();" onmouseout="hideNav();" />

            <div class="sub-nav" style="display:none ;">

                <div class="content">

                    <ul>

                        <li>造饭师XXXX一店</li>

                        <li>造饭师XXXX二店</li>

                        <li>造饭师XXXX三店</li>

                        <li>造饭师XXXX四店</li>

                    </ul>

                </div>

                <s><i></i></s>

            </div>

        </div>

        <script>

            function showNav() {

                $(".sub-nav").show();

            }

            function hideNav() {

                $(".sub-nav").hide();

            }

        </script>

    </body>

</html>

2、显示效果图

使用纯CSS实现带箭头的提示框的更多相关文章

  1. CSS实现带箭头的提示框

    我们在很多UI框架中看到带箭头的提示框,感觉挺漂亮,但是之前一直不知道其原理,今天网上找了些资料算是弄清楚原理了: 先上效果图: 原理分析: 上面的箭头有没有觉得很像一个三角形,是的,它就是三角形:只 ...

  2. 圆角带箭头的提示框css实现

    css是一个很强大的东西,很多网页效果,我们可以通过css直接实现.今天给大家分享的是一个用css实现的圆角带箭头的提示框. 效果如下图: 这一个样式主要涉及到了css的边框样式border的运用和定 ...

  3. css实现带箭头选项卡

    这阵子在做一个web端项目中遇到一个问题,需要实现带箭头的选项卡点击可切换.起初没想太多,直接切一个向上的小箭头图片,外层div设置相同颜色的边框,再用相对定位和绝对定位.这种方法是可行的,但是因为手 ...

  4. 用纯CSS实现的箭头

    div+css实现带三角箭头提示框 链接:http://www.xuebuyuan.com/160534.html 链接:http://www.admin10000.com/document/4089 ...

  5. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  6. 自定义常用input表单元素一：纯css 实现自定义checkbox复选框

    最下面那个是之前写的  今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化.今天把项目中的这个给更新上来.下面就直接还是 ...

  7. div+css制作带箭头提示框效果图(原创文章)

    一直都在看站友们的作品,今天也来给大家分享一个小的效果,第一次发还有点小紧张呢,语言表达能力不是很好,还请见谅…^ 先来个简单点的吧,上效果图 刚开始在网上看到效果图的时候感觉好神奇,当我试着写出来的 ...

  8. 纯CSS实现带小角的对话框式下拉菜单

    最近公司首页样式重写,头部下拉菜单改为了带小角的对话框式下拉菜单: 很多人可能会用图片,事实上纯CSS就能够实现: HTML: <!DOCTYPE html> <html lang= ...

  9. DIV+CSS实现左侧带三角形的提示框

    实现效果

随机推荐

  1. [FromBody]与[FromUrl]

    我们都知道,前台请求后台控制的方法有get方法和post方法两种, get:只支持ulr传数据,不管你是手动把参数拼接在Url里面还是写在data里面,只要是用get方法,都会自动绑定到url里面的形 ...

  2. ArcGIS Engine开发之地图基本操作（1）

    ArcGIS提供的各类数据形式以及相应接口 1. 空间数据 在GIS软件中,空间数据有多种不同的形式存在.按照不同的划分标准可以分为矢量数据和栅格数据.GIS格式数据和非GIS格式数据(CAD格式). ...

  3. Java Web之网上购物系统（提交订单、查看我的订单）

    作业终于做完了,好开心......虽然这一周经历不是那么顺利,但是觉得还是收获了不少,有过想哭的冲动,代码不会写,事情办不好,各种发愁.空间里发小发了带父母出去游玩的照片,瞬间能量值不知道是被击退的多 ...

  4. django 1.10 CSRF验证失败的解决过程

    最近工作闲,没事自学django,感觉这个最烦的就是各版本提供的api函数经常有变化,不是取消了就是参数没有了,网上搜到的帖子也没说明用的是什么版本的django,所以经常出现搬运过来的代码解决不了问 ...

  5. When I see you again(加密原理介绍，代码实现DES、AES、RSA、Base64、MD5)

    关于网络安全的数据加密部分,本来打算总结一篇博客搞定,没想到东西太多,这已是第三篇了,而且这篇写了多次,熬了多次夜,真是again and again.起个名字:数据加密三部曲,前两部链接如下: 整体 ...

  6. mac maven

    下载Maven 下载地址 : https://maven.apache.org/download.cgi 解压zip包到指定目录 例如: /Users/Walid/Desktop/develop/to ...

  7. mongodb之使用explain和hint性能分析和优化

    当你第一眼看到explain和hint的时候,第一个反应就是mysql中所谓的这两个关键词,确实可以看出,这个就是在mysql中借鉴过来的,既然是借鉴 过来的,我想大家都知道这两个关键字的用处,话不多 ...

  8. zabbix-3.0.3 mysql表分区的方法

    目的:解决mysql空间越来越大,mysql性能出现瓶颈,zabbix会无端出现大量agent超时报警 中间遇到一个mysql问题:5.1版本的mysql不支持分表(其实是支持的,需要重新编译mysq ...

  9. Redis在游戏服务器中的应用

    排行榜游戏服务器中涉及到很多排行信息,比如玩家等级排名.金钱排名.战斗力排名等.一般情况下仅需要取排名的前N名就可以了,这时可以利用数据库的排序功能,或者自己维护一个元素数量有限的top集合.但是有时 ...

  10. 基本shell编程【3】- 常用的工具awk\sed\sort\uniq\od

    awk awk是个很好用的东西,大量使用在linux系统分析的结果展示处理上.并且可以使用管道, input | awk ''  | output 1.首先要知道形式 awk 'command' fi ...