通过观察下拉菜单的过程，发现有两种状态，一种是鼠标没有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. java线程安全总结

    转自:http://blog.csdn.net/haolongabc/article/details/7249098 最近想将java基础的一些东西都整理整理,写下来,这是对知识的总结,也是一种乐趣. ...

  2. flume与Mosquitto的集成

    文章来自:http://www.cnblogs.com/hark0623/p/4173714.html   转发请注明 因业务需求,需要flume收集MQTT(Mosquitto)的数据.  方法就是 ...

  3. 关于flume中的几个疑惑

    文章发自http://www.cnblogs.com/hark0623/p/4205756.html  转载请注明 flume越用越有一些疑惑,这个月中按计划是要阅读flume源码的,我希望能解决我的 ...

  4. [转载]有了 malloc/free 为什么还要 new/delete ?

      malloc 与free 是C++/C 语言的标准库函数,new/delete 是C++的运算符.他们都可以用于申请动态内存和释放内存.      对于非内部数据类型的对象(如类对象)而言,光用m ...

  5. 针对mysql中分表批量添加字段

    项目中有用到这种类似的分表,如果要添加一个字段的话,该怎么办呢? dba表示弄 一个脚本批量处理就行了,卧槽,这我哪会啊,于是硬着头皮又继续问dba,dba给一个脚本,一看是这样的. #!/bin/b ...

  6. C#可以做什么

    C#可以做什么 学以致用.这也是大家学习C#的目标.当我们充分了解C#广阔的应用,才会激发我们最大的学习热情.下面将介绍一下C#的常见应用场景本文选自明明白白学C#大学霸. 0.2.1  开发普通软件 ...

  7. 简单几何(凸包+多边形面积) POJ 3348 Cows

    题目传送门 题意:求凸包 + (int)求面积 / 50 /************************************************ * Author :Running_Tim ...

  8. 贪心 BestCoder Round #39 1001 Delete

    题目传送门 /* 贪心水题:找出出现次数>1的次数和res,如果要减去的比res小,那么总的不同的数字tot不会少: 否则再在tot里减去多余的即为答案 用set容器也可以做,思路一样 */ # ...

  9. bzoj1032 [JSOI2007]祖码Zuma

    1032: [JSOI2007]祖码Zuma Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 672  Solved: 335[Submit][Stat ...

  10. HDU 2531 (BFS搜索)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2531 题目大意: 你的身体占据多个点.每次移动全部的点,不能撞到障碍点,问撞到目标点块(多个点)的最 ...