今天给大家分享一个纯html+css实现的下拉菜单。在此声明一点，源码并非出自本人之手，是同项目组一兄弟PLUTO写的。好东西嘛，所以果断拿出来和大家分享。如果有更好的想法或者建议，一定记得留言哦！好了，直接上代码：(IE6请直接越过)

<!DOCTYPE html>
<html lang="en">
<head>
<!-- create by pluto on 13-12-6 -->
<title>MENU</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="renderer" content="webkit">
<style type="text/css">
body{font:14px/20px normal "Arial", sans-serif;background:#f0f0f0;}
ul{list-style:none;margin: 0;padding: 0;}
.main{width:960px;margin:0 auto;}
.clearfix{*zoom: 1;}
.clearfix:before, .clearfix:after{display:table;content: "";line-height: 0;}
.clearfix:after{clear:both;}
.menu{margin-top: 30px;}
ul > li > a{white-space: nowrap;font-weight:bold;display: block;padding:7px 15px;color:#000;text-decoration: none;background-color:#222;text-shadow:0 0 1px rgba(100,255,255,.7), 0 0 20px rgba(255,255,255,0.3);transition:color 0.4s ease;}
ul > li > a:hover{color:#ddd;}
.menu > li{float: left;position: relative;margin-right: 2px;}
.menu > li > a{border-radius:15px;box-shadow:1px 2px 3px #222;}
.submenu > div{position: absolute;display: none;min-width:150px;padding:7px 0 0;}
.submenu:hover > div{display: block;}
.submenu ul{position:relative;border-radius:15px;box-shadow:0 0 0 rgba(0,255,255,.9);}
.submenu ul:before{display: block;content: "";width:0;position:absolute;top:-14px;left:20px;border-style:solid;border-width:7px;border-color:transparent;border-bottom-color:#222;}
.submenu ul > li:first-child > a{border-radius:5px 5px 0 0;}
.submenu ul > li:last-child > a{border-radius:0 0 5px 5px;}
</style>
</head>
<body>
    <div class="main">
        <ul class="menu clearfix">
            <li class="submenu">
                <a href="">MENU1</a>
                <div>
                    <ul>
                        <li><a href="">SUBMENU 01</a></li>
                        <li><a href="">SUBMENU 02</a></li>
                        <li><a href="">SUBMENU 03</a></li>
                    </ul>
                </div>
            </li>
            <li class="submenu">
                <a href="">MENU2</a>
                <div>
                    <ul>
                        <li><a href="">SUBMENU 04</a></li>
                        <li><a href="">SUBMENU 05</a></li>
                        <li><a href="">SUBMENU 06</a></li>
                    </ul>
                </div>
            </li>
            <li class="submenu">
                <a href="">MENU3</a>
                <div>
                    <ul>
                        <li><a href="">SUBMENU 07</a></li>
                        <li><a href="">SUBMENU 08</a></li>
                        <li><a href="">SUBMENU 09</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

// 注意：此效果低版本浏览器慎用！

转载请注明出处：http://www.cnblogs.com/callmesummer/p/3942405.html

拿出手机，打开支付宝扫一扫，再小的力量，也是一种支持：

纯css实现下拉菜单的更多相关文章

  1. 纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

    虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...

  2. 用纯css实现下拉菜单的几种方式

    第一种:display:none和display:block切换 <!DOCTYPE html> <html lang="en"> <head> ...

  3. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  4. 纯css3圆角下拉菜单 都没敢用js

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. HTML+CSS写下拉菜单

    今天学习了使用HTML+CSS实现下拉菜单效果,在这个例子中,我学到了如下知识点: 设置背景图片(background-image.background-size) 如何让无序列表横向显示(float ...

  6. CSS的下拉菜单被挡住，修改Z-INDEX也不成功

    CSS的下拉菜单被挡住,修改Z-INDEX也不成功 做了一个鼠标放上去就出现的下拉菜单,但是这个下拉的内容被挡住了. Z-INDEX 是设置不同块的层次的,我修改了问题还是有. 后来发现是必须要把该便 ...

  7. 纯洁CSS实现下拉菜单和下拉容器（纯洁CSS导航栏和导航下拉容器）

    虽然网上课程似即使案件大同小异,但我还是写,记笔记,也为您提供参考 我希望你能指导批评~~ 首先,我们必须列出ul li 开始我们的导航栏菜单也能说生产: 在下面的页面,我们先建XHTML结构体: & ...

  8. html5 css练习 下拉菜单制作

    *{    margin: 0;    padding: 0;}li{    list-style-type: none;}a{    text-decoration: none;}.ul1{marg ...

  9. 11.css定义下拉菜单

    注意点: 1.设置a标签的width 和 height 的时候,直接设置是没用的,可以以这样两种方式设置 (1). display:block; (2). float:left; 2.设置下拉菜单,最 ...

随机推荐

  1. C# KeyValuePair<TKey,TValue>与Container

    KeyValuePair<TKey,TValue>  KeyValuePair<TKey,TValue>是一个结构体,相当于C#一个Map类型的对象,可以通过它记录一个键/值对 ...

  2. easyUI的datagrid控件日期列不能正确显示Json格式数据的解决方案

    EasyUI是一套比较轻巧易用的Jquery控件,在使用过程中遇到一个问题,它的列表控件——datagrid, 在显示日期列的时候,由于后台返回给页面的数据是Json格式的,其中的日期字段,在后台是正 ...

  3. WebApi2官网学习记录--HTTP Message Handlers

    Message Handlers是一个接收HTTP Request返回HTTP Response的类,继承自HttpMessageHandler 通常,一些列的message handler被链接到一 ...

  4. Struts2 技术全总结 （正在更新）

    背景:Struts1是一个高度成熟的框架,运行效率高,但其致命缺陷在于与JSP/Servlet的耦合非常紧密,因而导致了一些严重问题.其次,Struts1与Servlet API的严重耦合,使应用难以 ...

  5. 如何禁止C++默认生成成员函数

    前言: 前几天在一次笔试过程中被问到c++如何设计禁止调用默认构造函数,当时简单的想法是直接将默认构造函数声明为private即可,这样的话对象的确不能直接调用.之后查阅了<Effective ...

  6. 基于ViewPager的一些酷炫切换效果

    1.ViewPager可以用于实现类似banner的功能,我曾经在“时间超市”项目中使用过.但如何在此基础上实现一些切换的酷炫效果呢?今天细细品读了鸿洋大神的相关博文,终于学会了如何自定义切换效果. ...

  7. The Suspects（POJ 1611 并查集）

    The Suspects Time Limit: 1000MS   Memory Limit: 20000K Total Submissions: 30158   Accepted: 14665 De ...

  8. iOS AVAudioPlayer 提示音

    NSString *urlPath = [[NSBundle mainBundle] pathForResource:@"" ofType:@""]; NSUR ...

  9. 拉姆达表达式 追加 条件判断 Expression<Func<T, bool>>

    public static class PredicateBuilder { /// <summary> /// 机关函数应用True时:单个AND有效,多个AND有效:单个OR无效,多个 ...

  10. HDU 3507 PrintArticle (单调队列优化)

    题意:给出一个数列C,一个数字M,将数列分成若干段,每段的代价为(设这段的数字为k个): dp[i]=min(dp[j]+(sum[i]-sum[j])*(sum[i]-sum[j])+M) 若j1& ...