类似下拉菜单2个一体化小三角，习惯上用字体图标加jQuery处理，比较方便，但是下面纯css手写解决方式，效果也还不错，对CSS知识也是一个比较好的孔固。

　　小三角用了2种不同处理方式：1、利用border属性；2、利用正方形旋转45度。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>下拉菜单</title>

        <style>

            *{

                margin: ;

                padding: ;

            }

            .select {

                margin: 50px auto;/*居中*/

                width: 180px;

                text-align: center;

            }

            .select a {

                color: #fff;

                text-decoration: none;

            }

            .select ul,.select li {

                list-style: none;

            }

            .select span {

                line-height: 46px;

                background-color: #41b1d9;

                display: block;

                margin-bottom: 20px;

                position: relative;

                z-index: ;

                border-radius: 5px;

                -webkit-transition: all .2s ease-in;

                transition: all .2s ease-in;

            }

            .select span a:after{

                content: " ";

                display: inline-block;

                width: ;

                height: ;

                font-size: ;

                line-height: ;

                border-bottom: solid 6px #fff;

                border-left: solid 4px transparent;

                border-right: solid 4px transparent;

                vertical-align: 3px;

                margin-left: 10px;

                -webkit-transition: all .2s ease-in;

                transition: all .2s ease-in;

            }

            /*给以整体的阴影和圆角 但是不能overflow*/

            .drop {

                left: ;

                right: ;

                top: -9999px;

                box-shadow:   2px  rgba(, , , 0.2);

                border-radius: 5px;

                position: absolute;

                z-index: ;

                -webkit-transform: translateY(-50px);/*y轴方向平移*/

                transform: translateY(-50px);

                opacity: ;

                -webkit-transition: all .2s ease-in;/*平移时间0.2s*/

                transition: all .2s ease-in;

            }

            /*给送个下拉助攻*/

            .select:hover span{

                background-color: #1f93bc;

            }

            .select:hover span a:after{

                -webkit-transform: rotate(180deg);/*旋转180度*/

                transform: rotate(180deg);

            }

            .select:hover .drop{

                position: static;

                opacity: ;

                -webkit-transform: translateY();

                transform: translateY();

            }

            /*一个很重要的三角形*/

            .drop li:first-child:before {

                content: " ";

                font-size: ;

                line-height: ;

                margin:  auto;/*居中*/

                display: block;/*独占一行*/

                box-shadow:   2px  rgba(, , , 0.2); /*配合整体一样的投影*/

                background-color: #fff;

                width: 10px;

                height: 10px;

                -webkit-transform: rotate(45deg);

                transform: rotate(45deg); /*一个正方形倾斜四十五度就是三角了但是要把下半部分藏起来*/

                position: relative;

                top: -5px; /*果断的露出上半部分*/

                z-index: ; /*果断的隐藏下半部分*/

                -webkit-transition: all .2s ease-in;

                transition: all .2s ease-in;

            }

            .drop li a {

                color: #;

                line-height: 46px;

                border-bottom: solid 1px #eee;

                font-size: 14px;

                display: block;

                background-color: #fff; /*要有背景色才能盖住呀*/

                position: relative;

                z-index: ; /*这里很重要 要挡住三角形的下半部分*/

                -webkit-transition: all .2s ease-in;

                transition: all .2s ease-in;

            }

            /*以下两块：控制第一个和最后一个li要圆角，因为最外边的div没有overflow 也不可以overflow*/

            .drop li:first-child a{

                border-top-left-radius: 5px;

                border-top-right-radius: 5px;

                margin-top: -10px;

            }

            .drop li:last-child a{

                border-bottom-left-radius: 5px;

                border-bottom-right-radius: 5px;

                border-bottom: none;

            }

            /*hover事件给了li，先改变三角 再改变a*/

            .drop li:hover:before{

                background-color: #41b1d9;

            }

            .drop li:hover a {

                background-color: #41b1d9;

                color: #fff;

            }

        </style>

    </head>

    <body>

        <div class="select">

            <span><a href="javascript:void(0);">鼠标浮上来</a></span>

            <div class="drop">

                <ul>

                    <li>

                        <a href="javascript:void(0);">下拉菜单一</a>

                    </li>

                    <li>

                        <a href="javascript:void(0);">下拉菜单二</a>

                    </li>

                    <li>

                        <a href="javascript:void(0);">下拉菜单三</a>

                    </li>

                    <li>

                        <a href="javascript:void(0);">下拉菜单四</a>

                    </li>

                </ul>

            </div>

        </div>

    </body>

</html>

效果如下：

一个常见下拉菜单的样式：一体化小三角（纯css手写解决）的更多相关文章

  1. 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）

    这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...

  2. 下拉菜单被表单、图片、FLASH挡住的解决办法

    设置Flash的参数: <param name="wmode" value="opaque"> <object classid="c ...

  3. jQuery制作一个多彩下拉菜单按钮

    最终效果图: html代码: <div id="list"> <div id="btn"> <div class="ic ...

  4. SpinnerViewPop【PopWindow样式（单选）、Dialog样式（单选+多选）的下拉菜单】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 对下拉菜单的文本区域和列表区域进行了封装.包括两种展现方式:popwindow(单选).dialog(单选+多选) 因为该封装需要在 ...

  5. Bootstrap下拉菜单、按钮式下拉菜单

    1. 概述 下拉菜单使用频率也是比较高的,比较常见的使用场景是在导航菜单栏,某个主菜单含有下拉的子菜单. Bootstrap为下拉菜单提供了两种实现方式,即普通的下拉菜单还有按钮式的下拉菜单.我们先看 ...

  6. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

  7. MDNavBarView下拉导航菜单（仿美团导航下拉菜单）

    说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下, ...

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

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

  9. 巧用CSS3 :target 伪类制作Dropdown下拉菜单（无JS）

    :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...

随机推荐

  1. NetCore+Dapper WebApi架构搭建（五）：Swagger构建WebApi界面

    上一节讲解了仓储的依赖注入,想必现在都可以通过构造函数依赖注入直接调用 但是WebApi只是提供一个接口调用,为了方便我们的操作,我们得给他加上一个图形化界面工具,使用Swagger WebApi项目 ...

  2. OpenContrail 体系

    OpenContrail 体系架构文档 1  概述1.1  使用案例1.2  OpenContrail控制器和vRouter1.3  虚拟网络1.4     Overlay Networking1.5 ...

  3. 【推导】Codeforces Round #484 (Div. 2) C. Cut 'em all!

    题意:给你一棵树,让你切掉尽可能多的边,使得产生的所有连通块都有偶数个结点. 对于一棵子树,如果它有奇数个结点,你再从里面怎么抠掉偶数结点的连通块,它都不会变得合法.如果它本来就有偶数个结点,那么你怎 ...

  4. Lost connection to MySQL server at 'reading initial communication packet', system error: 0的一个解决方案

    -A INPUT -p tcp -m state --state NEW -m tcp --dport 3306 -j ACCEPT在icmp之前/etc/init.d/iptables restar ...

  5. [COGS2580]偏序 II

    [COGS2580]偏序 II 题目大意: \(n(n\le50000)\)个五元组,求五维偏序. 思路: CDQ分治套CDQ分治套CDQ分治套树状数组. 时间复杂度\(\mathcal O(n\lo ...

  6. 1、安装Redis的PHP扩展

    1.安装Redis的PHP扩展 1.1 安装phpize yum install php-devel 1.2 下载扩展源码包,直接用wget #wget下载github上的文件 wget https: ...

  7. 【scrapy】使用方法概要（四）(转)

    [请初学者作为参考,不建议高手看这个浪费时间] 上一篇文章,我们抓取到了一大批代理ip,本篇文章介绍如何实现downloaderMiddleware,达到随即使用代理ip对目标网站进行抓取的. 抓取的 ...

  8. BZOJ 2049: [Sdoi2008]Cave 洞穴勘测 （动态树入门）

    2049: [Sdoi2008]Cave 洞穴勘测 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 1528  Solved: 644[Submit][ ...

  9. 【Go入门教程8】interface（interface类型、interface值、空interface{}、嵌入interface、反射）

    interface Go语言里面设计最精妙的应该算interface,它让面向对象,内容组织实现非常的方便,当你看完这一章,你就会被interface的巧妙设计所折服. 什么是interface 简单 ...

  10. Openfiler能把标准x86/64架构的系统变成一个强大的NAS、SAN存储和IP存储网关

    http://www.linuxprob.com/vmware-openfiler.html