通过观察下拉菜单的过程，发现有两种状态，一种是鼠标没有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. WOSA协议(转)

    WOSA(全称是Windows开放式系统体系结构 Windows Open System Architecture),是微软公司提出的一种在Windows操作系统下的软件架构 WOSA/XFS是基于W ...

  2. hdu 1150 Machine Schedule 最少点覆盖转化为最大匹配

    Machine Schedule Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php? ...

  3. Activity生命周期图

    首先看一下Android api中所提供的Activity生命周期图 Activity其实是继承了ApplicationContext这个类,我们可以重写以下方法,如下代码: public class ...

  4. 【JUnit 报错】java.lang.NoClassDefFoundError: org/apache/logging/log4j/message/Message

    使用JUnit的时候,报错:java.lang.NoClassDefFoundError: org/apache/logging/log4j/message/Message 原因是因为项目中导入的架包 ...

  5. Unrecognized Windows Sockets error: 0: JVM_Bind

    Unrecognized Windows Sockets error: 0: JVM_Bind [转帖]今天很是奇怪,在运行服务器端的时候,经常遇到这个异常: java.net.SocketExcep ...

  6. C# MarshalByRefObject 和Serializable的区别

    这两种方式的类一般都是用于远程传输时使用. marshalbyrefobject是通过引用传递serializable是通过值传递,现在就来分析下什么是引用传递,什么是值传递. 理解这个对Remoti ...

  7. PHP 输出表格单元格的数据之用表单的方式；

    echo "<table border=1 class="imagetable" >"; //使用表格格式化数据echo "<for ...

  8. 简单几何(求划分区域) LA 3263 That Nice Euler Circuit

    题目传送门 题意:一笔画,问该图形将平面分成多少个区域 分析:训练指南P260,欧拉定理:平面图定点数V,边数E,面数F,则V + F - E =  2.那么找出新增的点和边就可以了.用到了判断线段相 ...

  9. BZOJ4373 : 算术天才⑨与等差数列

    设$pre[i]$表示第$i$个数上一次出现的位置,$d[i]=abs(a[i]-a[i+1])$. 用线段树维护区间内$a$的最小值.最大值,$pre$的最大值以及$d$的$\gcd$. 对于询问$ ...

  10. Mysql_mysql 性能分析及explain用法

    1 使用explain语句去查看分析结果,如  explain select * from test1 where id=1;会出现:id  selecttype  table  type possi ...