通过观察下拉菜单的过程，发现有两种状态，一种是鼠标没有hover时，一种是鼠标hover时。

主菜单hover时，显示子菜单；主菜单没有hover时，不显示子菜单

<!DOCTYPE html>

<html>

<head>

<meta charset="gb2312" />

<title>下拉菜单</title>

<link type="text/css" rel="stylesheet" href="./css/reset.css" />

<style>

/* no hover 状态 */

.xiala_menu{

    width:30%; /* 调整宽度 */

    margin:0 auto;

    text-align:center;

}

.xiala_menu li{

    width:80px;

    float:left;

    background:#e5e5e5;

    margin-right:1px;

}

.xiala_menu li ul{

    display:none;

}

/* hover 状态 */

.xiala_menu li:hover ul{

    display:block;

}

.xiala_menu li:hover ul li{

    background:#ccc;

    margin:1px 0;

    cursor:pointer;

}

.xiala_menu li:hover ul li:hover{

    color:red;

    background:#bdbdbd;

}

</style>

</head>

<body>

<div class="xiala_wrap">

    <ul class="xiala_menu clearfix">

        <li>

            菜单1

            <ul>

                <li>

                    菜单11

                </li>

                <li>

                    菜单11

                </li>

                <li>

                    菜单11

                </li>

                <li>

                    菜单11

                </li>

            </ul>

        </li>

    </ul>

</div>

</body>

</html>

纯css下拉菜单的制作的更多相关文章

  1. 支持多种浏览器的纯css下拉菜单

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

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

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

  3. 纯CSS下拉菜单（希望对有需要的小伙伴有所帮助）

    效果截图(颜色有点丑,请无视): <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  4. 超简洁的CSS下拉菜单

    效果体验:http://hovertree.com/texiao/css/3.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http ...

  5. 华丽导航CSS下拉菜单特效

    华丽导航CSS下拉菜单特效,华丽导航,导航特效,CSS,下拉菜单,华丽特效. 代码地址:http://www.huiyi8.com/sc/26811.html 风景图片网:http://www.hui ...

  6. CSS：CSS 下拉菜单

    ylbtech-CSS:CSS 下拉菜单 1.返回顶部 1. CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例 实例演示 1 实例演示 2 基本下拉菜单 当鼠标 ...

  7. 纯CSS下拉导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="h ...

  8. 使用checkbox实现纯CSS下拉框

    在这个例子中,我们会看到一个纯CSS制作的下拉框.主要是要用到了HTML元素的checkbox 和CSS3选择器,并没有用到JavaScript.例子如下: Click to Expand Link ...

  9. 简易的CSS下拉菜单 - 1

    <!DOCTYPE html> <html> <head> <style> body{ margin:0; } .dropmenu{ backgroun ...

随机推荐

  1. BroadcastRecevier广播接受者

    广播接收器的两种注册方式: 1)动态注册:在代码中注册,创建一个IntentFilter(意图过滤器)对象,设置想要就收的广播,在onCreate()方法中通过调用registerReceiver() ...

  2. Spring的类型转换器

    spring有2种类型转换器,一种是propertyEditor,一种是Converter. 第一种属性编辑器用法见Spring的属性编辑器的章节.如果2种转换器都适用,那么究竟会适用哪种呢?Spri ...

  3. js:数据结构笔记6--字典

    Dictionary类的基础是数组不是对象:字典的主要用途是通过键取值: 基本定义: function Dictionary() { this.dataStore = new Array(); thi ...

  4. 原生JS代码实现一个Ajax异步请求

    异步加载的方式 (1) defer,只支持IE (2) async: (3) 创建script,插入到DOM中,加载完毕后callBack 实现ajax之前必须要创建一个 XMLHttpRequest ...

  5. 状压DP SGU 223 Little Kings

    题目传送门 /* 题意:n*n的矩阵,放置k个king,要求king互相不能攻击,即一个king的8个方向都没有另外的king,求方案个数 状态压缩DP:dp[i][num[j]][s] 代表在第i行 ...

  6. 逆序数2 HDOJ 1394 Minimum Inversion Number

    题目传送门 /* 求逆序数的四种方法 */ /* 1. O(n^2) 暴力+递推 法:如果求出第一种情况的逆序列,其他的可以通过递推来搞出来,一开始是t[1],t[2],t[3]....t[N] 它的 ...

  7. 基于Extjs的web表单设计器 第七节——取数公式设计之取数公式的使用

    基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extj ...

  8. cocos2d CCDictionary

    CCDictionary* dict=CCDictionary::create(); CCString* str1=CCString::create("); CCString* str2=C ...

  9. NOIP200406合并果子

    试题描述 在一个果园里,多多已经将所有的果子打了下来,而且按果子的不同种类分成了不同的堆.多多决定把所有的果子合成一堆.    每一次合并,多多可以把两堆果子合并到一起,消耗的体力等于两堆果子的重量之 ...

  10. SecureCrt脚本（一）顶级对象之Crt

    Crt自动化 测试 SecureCrt脚本 JS脚本   1.引言 2.关于脚本表头 3.顶级对象'crt'的子属性和方法 3.1.属性 3.1.1.Dialog 3.1.2.Screen 3.1.3 ...