http://www.wikihow.com/Create-a-Dropdown-Menu-in-HTML-and-CSS

HTML

<div id="leftmenu">
            <ul>
                <li><a href="#">Home</a></li>
                <li class='has-sub'><a href="#">PRODUCTS</a>
                    <ul>
                        <li class='has-sub'><a href="#">Sub Product1</a>
                            <ul>
                                <li </a>
                                </li>
                                <li </a></li>
                            </ul>
                        </li>
                        <li class='no-sub'><a href="#">Sub Product2</a></li>
                    </ul>
                </li>
            </ul>
        </div>

CSS

<style>
        /* Starter CSS for Flyout Menu */
        #leftmenu {
            padding: ;
            margin: ;
            border: ;
        }

            #leftmenu ul,
            li {
                list-style: none;
                margin: ;
                padding: ;
            }

            #leftmenu ul {
                position: relative;
                z-index: ;
                float: left;
            }

                #leftmenu ul li {
                    float: left;
                    height: 38px;
                    line-height: 38px;
                    width: 200px;
                    vertical-align: middle;
                }

                    #leftmenu ul li.hover,
                    #leftmenu ul li:hover {
                        position: relative;
                        z-index: ;
                        cursor: default;
                    }

                #leftmenu ul ul {
                    visibility: hidden;
                    position: absolute;
                    top: %;
                    left: ;
                    z-index: ;
                    width: %;
                }

                    #leftmenu ul ul li {
                        float: none;
                    }

                #leftmenu ul li:hover > ul {
                    visibility: visible;
                }

                #leftmenu ul ul {
                    top: ;
                    left: %;
                }

                #leftmenu ul li {
                    float: none;
                }
        /* Custom Stuff */
        #leftmenu {
            border-radius: 5px;
            background-clip: padding-box;
            box-shadow:   2px 1px rgba(, , , 0.15);
            width: 160px;
        }

            #leftmenu span,
            #leftmenu a {
                display: inline-block;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 12px;
                text-decoration: none;
                border-bottom: solid 1px rgba(, , , 0.15);
            }

            #leftmenu:after,
            #leftmenu ul:after {
                content: '';
                display: block;
                clear: both;
            }

            #leftmenu > ul > li ul ul {
                border-radius:  6px 6px ;
                background-clip: padding-box;
                background-color: #ffffff;
            }

            #leftmenu ul,
            #leftmenu li {
                background-color: #4cb6ea;
                font-weight: bold;
                width: %;
            }

            #leftmenu li {
                height: 25px;
                line-height: 25px;
            }

            #leftmenu a {
                color: #ffffff;
                line-height: %;
                padding: 8px 20px 8px 20px;
                width: 120px;
                font-size: 16px;
            }

                #leftmenu a:hover {
                    color: #;
                    background: #ffffff;
                }

            #leftmenu ul ul {
                width: 160px;
                border: 1px solid #dddddd;
                background: #ffffff;
            }

                #leftmenu ul ul li {
                    background: #ffffff;
                }

                    #leftmenu ul ul li a {
                        color: #;
                    }

                        #leftmenu ul ul li a:hover {
                            color: #ff006e;
                        }

            #leftmenu .has-sub {
                position: relative;
            }

            #leftmenu ul .has-sub a:before {
                display: block;
                content: "";
                border: 6px solid transparent;
                border-left-color: #eee;
                z-index: ;
                height: ;
                width: ;
                position: absolute;
                right: 12px;
                top: -2px;
            }

            #leftmenu .has-sub:hover a:before {
                border-left-color: #;
            }

            #leftmenu .has-sub:hover ul li a:before {
                display: none;
            }

            #leftmenu .has-sub:hover .has-sub a:before {
                display: block;
            }

            #leftmenu .has-sub:hover .has-sub:hover a:before {
                border-left-color: #ff006e;
            }

            #leftmenu .has-sub:hover .has-sub:hover ul li a:before,
            #leftmenu .no-sub a:before,
            #leftmenu .no-sub:hover a:before {
                display: none;
            }
    </style>

Css Study - 纵向Menu - By html and Css的更多相关文章

  1. Css Study - 横向MENU

    http://cssmenumaker.com/menu/tabbed-chrome-and-blue HTML <div id="topMenu"> <ul&g ...

  2. Css Study - Top Menu in Header 横向间隔的菜单

    .shortcut ul li { display: inline; } CSS <style> ol, ul { list-style: none; } html, body, ul, ...

  3. HTML+CSS+jQuery 纵向导航 && 横向导航 && 消除IE6 BUG && 感悟怎样学习

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...

  4. 纯CSS二级纵向菜单

    纯CSS二级纵向菜单 <body> <div class="divda"> <div class="nav"> <ul ...

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

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

  6. DIV+CSS专题:十天学会DIV+CSS

    DIV+CSS专题:十天学会DIV+CSS,在网上看到的.感觉蛮好,推荐一下. 十天学会DIV+CSS(WEB标准)CHM格式文件下载 第十天 div+css网页标准布局实例教程(三) 第十天 div ...

  7. CSS系列:在HTML中引入CSS的方法

    HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须将CSS与HTML链接在一起使用.在HTML中,引入CSS的方法主要有4种:行内式.内嵌式.导入式和链接式. 1. 行内式 行 ...

  8. html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版

    继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...

  9. CSS Shake – 摇摆摇摆!动感的 CSS 抖动效果

    CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...

随机推荐

  1. HTTPS原理介绍

    内容来源于:http://www.guokr.com/post/114121/ 自己做个备忘. 二.HTTPS到底安全吗? 这个答案是肯定的,很安全.谷歌公司已经行动起来要大力推广HTTPS的使用,在 ...

  2. [zt]矩阵求导公式

    今天推导公式,发现居然有对矩阵的求导,狂汗--完全不会.不过还好网上有人总结了.吼吼,赶紧搬过来收藏备份. 基本公式:Y = A * X --> DY/DX = A'Y = X * A --&g ...

  3. Jfinal中手动提交/回滚 事物

    在Jfinal中有个Tx类为事物声明类 在方法或controller上面加@Before({Tx.class})即可,可是这样并不能满足有的业务场景 下面是今天写的手动提交的事物处理方法,希望对大家有 ...

  4. jquery中each遍历各种标签方法

    这写天用到的遍历jquery each方法比较频繁 刚好有时间,就在这里记录一下 jquery用的是bootstrap的线上文件 不需要导入 <!DOCTYPE html><html ...

  5. HTML 几种特别分割线特效

    一.基本线条 二.特效(效果并不是孤立的,可相互组合)1.两头渐变透明:<HR style="FILTER: alpha(opacity=100,finishopacity=0,sty ...

  6. js的extend和fn.extend使用

    $.fn.extend扩展的是一个jQuery对象函数,$.extend扩展的是一个jQuery全局函数 <!DOCTYPE html> <html> <head> ...

  7. 建造者模式(Builder)

    GOF:将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 类图:

  8. IOS第16天(2,Quartz2D下载进度条)

    *************自定义下载的view的方法 #import "HMProgressView.h" @interface HMProgressView() @propert ...

  9. 【iCore3 双核心板_FPGA】例程八:触发器实验——触发器的使用

    实验指导书及代码包下载: http://pan.baidu.com/s/1bswW3c iCore3 购买链接: https://item.taobao.com/item.htm?id=5242294 ...

  10. 转载~kxcfzyk:Linux C语言多线程库Pthread中条件变量的的正确用法逐步详解

    Linux C语言多线程库Pthread中条件变量的的正确用法逐步详解   多线程c语言linuxsemaphore条件变量 (本文的读者定位是了解Pthread常用多线程API和Pthread互斥锁 ...