通过观察下拉菜单的过程，发现有两种状态，一种是鼠标没有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. 开发Android 范的错误

    1 在onCreate(Bundle savedInstanceState)方法中, 按钮单击事件的实现直接写在onCreate方法了里,这样就好导致这个按钮只能触发一次, 因为在Android体系中 ...

  2. ML 01、机器学习概论

    机器学习原理.实现与实践——机器学习概论 如果一个系统能够通过执行某个过程改进它的性能,这就是学习. ——— Herbert A. Simon 1. 机器学习是什么 计算机基于数据来构建概率统计模型并 ...

  3. 一件关于数据库日志log的无聊事情

    为何说是无聊的记录呢? 因为事先把问题想复杂了,事后发现的时候觉得更是无聊的行为.还是写下来,毕竟很少弄这么无聊的事情. 事情起因是需要给服务器做性能基数(baseline),用sqldiag 提取了 ...

  4. Eclipse中导入外部jar包

    首先在项目下创建一个文件夹,保存我们的jar包. 在项目名上右击,依次点击[New]-->[Floder],打开新建文件夹窗口   输入文件夹名称[lib],点击[ok].我们通常在lib文件夹 ...

  5. JDK的命令行工具

    Jcmd:综合工具 jcmd -l  列出当前运行的所有虚拟机 参数-l表示列出所有java虚拟机,针对每一个虚拟机,可以使用help命令列出该虚拟机支持的所有命令 jcmd [pid] help j ...

  6. POJ1780 Code（欧拉路径）

    n位密码,要用尽可能短的序列将n位密码的10n种状态的子串都包括,那么要尽量地重合. 题目已经说最短的是10n + n - 1,即每一个状态的后n-1位都和序列中后一个状态的前n-1位重合. 这题是经 ...

  7. BZOJ3807 : Neerc2011 Lanes

    左右与右左是两个独立的问题 设f[i]表示i时刻左右车道减少一条的答案 g[i]表示i时刻右左车道增加一条的答案 ans=min(f[i]+g[i+r]) 计算f[i]: 首先暴力计算出f[m+1], ...

  8. CC150 - 11.3

    Question: Given a sorted array of n integers that has been rotated an unknown number of times, write ...

  9. 【wikioi】2495 水叮当的舞步（IDA*）

    http://wikioi.com/problem/2495/ 这题我还是看题解啊囧.(搜索实在太弱.完全没想到A*,还有看题的时候想错了,.,- -) 好吧,估价还是那么的简单,判断颜色不同的数目即 ...

  10. 封装同步的UIActionSheet

    封装同步的UIActionSheet 发问题 做 iOS 开发的同学想必都用过 UIActionSheet.UIActionSheet 可以弹出一个选择列表,让用户选择列表中的某一项操作.使用 UIA ...