爱编程爱分享,原创文章,转载请注明出处,谢谢!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. 【代码笔记】iOS-一个tableView,两个section

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  2. 【代码笔记】iOS-旋转的风扇

    一,效果图. 二,工程图. 三,代码. AppDelegate.m #import "AppDelegate.h" //加入头文件 #import "RoundDiskV ...

  3. Java使用POS打印机(无驱)

    使用原因:应项目要求,需要使用打印机,但是如果使用Windows驱动来实现打印,在某些条件下会发生网络堵塞等,而且没有提示,所以为了确保信息的完整,避免数据丢失.我们使用无驱打印(直接写端口的方法), ...

  4. (八)数据呈现——一图胜千言<完结>

    数据分析师就像厨师一样.厨师的工作有5步:下单.备料.切配.烹饪.打荷.数据分析师的工作也有5步.呈现数据就好像打荷.厨师在把菜肴端给客人之前要做盘饰美化,让菜肴精致美观,这个工作就是打荷.同样,数据 ...

  5. [转].NET Core中的认证管理解析

    本文转自:http://www.cnblogs.com/durow/p/5783089.html 0x00 问题来源 在新建.NET Core的Web项目时选择“使用个人用户账户”就可以创建一个带有用 ...

  6. linux的学习记录随笔

    为什么学习linux 因为操作系统是一种介质,你要接触其中的东西,首先必须要有介质,而linux在服务器端是老大哥的地位,所以呢,学习linux吧. 学习的方式 可以看视频 imooc.百度传课.网易 ...

  7. [收集]MVC3 HTML辅助方法集录

    1.跳转链接 @Html.ActionLink("linkText","actionName",routeValues,htmlAttributes) e.g& ...

  8. VMWare Tools 和 Shared folder(共享文件夹)

    转自: http://www.51testing.com/html/38/225738-143732.html 使用vmwar下shared folders功能实现vmware中host与ghost间 ...

  9. Django之Model操作

    Django之Model操作 本节内容 字段 字段参数 元信息 多表关系及参数 ORM操作 1. 字段 字段列表 AutoField(Field) - int自增列,必须填入参数 primary_ke ...

  10. [LeetCode] Remove Duplicates from Sorted List 移除有序链表中的重复项

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...