通过观察下拉菜单的过程，发现有两种状态，一种是鼠标没有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. tar.xz文件如何解压 (已验证）

    XZ压缩最新压缩率之王 xz这个压缩可能很多都很陌生,不过您可知道xz是绝大数linux默认就带的一个压缩工具. 之前xz使用一直很少,所以几乎没有什么提起. 我是在下载phpmyadmin的时候看到 ...

  2. 【Log4j2 配置详解】log4j2的资源文件具体怎么配置

    可以先附上一个log4j2的资源文件详细内容,对照着看 ### set log levels ### log4j.rootLogger = INFO , C , D , E ### console # ...

  3. 把Chrome浏览器变成文本编辑器

    CoderWall 分享的一个小技巧. 在浏览器地址栏中输入一行代码:data:text/html, <html contenteditable> ,回车即可把浏览器变临时编辑器. 按f1 ...

  4. Aqua Data Studio中文乱码

    使用Aqua Data Studio 查询数据时,如果表中的数据有中文时,会显示乱码,如下图: 解决方法很简单,只能更改字体即可,步骤如下: 更改字体后,显示的结果如下:

  5. Linux下压缩与解压命令tar

    Linux下常见压缩文件的扩展名 *.gz:gzip压缩的: *.bz2:bzip2压缩的: *.tar:tar程序打包但没有压缩的: *.tar.gz:打包后并经过gzip压缩的: *.tar.bz ...

  6. NGUI全面实践教程（大学霸内部资料）

    NGUI全面实践教程(大学霸内部资料)   试读文档下载地址:链接:http://pan.baidu.com/s/1jGosC9g 密码:8jq5 介绍:NGUI全面实践教程(大学霸内部资料)本书是国 ...

  7. Encoding

    Problem Description Given a string containing only 'A' - 'Z', we could encode it using the following ...

  8. LightOJ1005 Rooks（DP/排列组合）

    题目是在n*n的棋盘上放k个车使其不互相攻击的方案数. 首先可以明确的是n*n最多只能合法地放n个车,即每一行都指派一个列去放车. dp[i][j]表示棋盘前i行总共放了j个车的方案数 dp[0][0 ...

  9. extjs tips

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  10. velocity 判断 变量 是否不是空或empty

    原先的 #if($mobile) 这种写法是不准确的 ,请换成 "$!{ mobile}"!="" 说明 :    #if($mobile)   这种写法 只能 ...