文档章节

Css 实现二级菜单

phpweishunlong
 phpweishunlong
发布于 2017/04/30 15:29
字数 137
阅读 4
收藏 0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ul导航实例——二级菜单</title>
    <style>
        *{margin:0;padding:0;}
        li{
            list-style:none;
        }
        ul > li{
            float:left;
            background:pink;
            width:120px;
            height:50px;
            text-align:center;
            line-height:50px;
        }
        ul > li:hover{
            background:purple;
            cursor:pointer;
        }
        ul > li:hover ol{
            display:block;
        }
        a{
            text-decoration:none;
            color:#333;
        }
        ol{
            background:#ccc;
            display:none;
        }
        ol > li:hover{
            background:#f99;
        }
    </style>
</head>
<body>
    <ul>
        <li>首页</li>
        <li>选项1</li>
        <li>选项2</li>
        <li>
            选项3
            <ol>
                <li>分类1</li>
                <li>分类2</li>
                <li>分类3</li>
                <li>分类4</li>
            </ol>
        </li>
        <li>选项4</li>
        <li>选项5</li>
    </ul>
</body>
</html>

© 著作权归作者所有

共有 人打赏支持
phpweishunlong
粉丝 1
博文 64
码字总数 26288
作品 0
广州
程序员
私信 提问
超炫酷纯CSS3 3D折叠二级下拉菜单

超炫酷纯CSS3 3D折叠二级下拉菜单 HTML5资源教程2017-12-210 阅读 css3下拉菜单3d 这是一款外观非常炫酷的CSS3 3D下拉菜单,它的特点是主菜单的背景和页面背景非常融合,看上去就像菜单嵌入在...

HTML5资源教程
2017/12/21
0
0
JS二级菜单不同实现方法分析【4种方法】

JS二级菜单不同实现方法分析【4种方法】 同步滚动:开 本文实例讲述了JS二级菜单不同实现方法。分享给大家供大家参考,具体如下: 之前面试的时候被问到过一次,后来,在笔试的时候又遇到了,...

前端小攻略
2018/12/22
0
0
从实战中学前端:顶部导航

本篇是从实战中学前端的第二篇,上一篇用css实现了几个还不错的按钮,这一篇来实现顶部导航,其中包含二级导航的实现。 首先我们来看看将要实现的导航效果图: 接下来我们要实现的导航功能:...

有力量的神经病
2016/12/07
12
0
关于网站二级联动菜单前台不能正常显示的问题

在做网站的时候遇到一个二级联动菜单不显示的问题,我是想用css直接控制二级导航菜单,但是二级菜单不能现实,下边是二级联动菜单的html部分: <div class="menu"><ul class="wrapper"> <di......

肖登天
2013/02/27
0
1
一个二级联动菜单的问题,高手帮忙

在做网站的时候遇到一个二级联动菜单不显示的问题,我是想用css直接控制二级导航菜单,但是二级菜单不能现实,下边是二级联动菜单的html部分: 控制二级联动菜单的CSS样式表代码如下: 现在的...

肖登天
2013/02/27
545
2

没有更多内容

加载失败,请刷新页面

加载更多

Spark集群安装方式2

环境: jdk1.8、hadoop-2.7、spark-1.6、三台centos7(如下List-1所示) List-1 如下30上部署master;31上部署worker1;32上部署worker2 192.168.33.30 master192.168.33.31 worker1192.168.......

克虏伯
18分钟前
1
0
java File常用的方法

import java.io.File; public class a_22 { public static void main(String[] args) {File f= new File("D:\\tianya\\2019.3.14\\html");System.out.println(f.isDirectory());Syste......

南桥北木
25分钟前
1
0
equals()的重写规则

自反性。对于任何非null的引用值x,x.equals(x)应返回true。 对称性。对于任何非null的引用值x与y,当且仅当:y.equals(x)返回true时,x.equals(y)才返回true。 传递性。对于任何非null的引用...

无精疯
52分钟前
2
0
Go基础系列:双层channel用法示例

双层通道的解释见Go的双层通道 以下是一个双层通道的使用示例。注意下面的示例中使用了"信号通道"(Signal channel),但这里的信号通道是多余的,仅仅只是为了介绍。 信号通道不用来传递数据,...

echojson
今天
2
0
PHP文件上传error的错误类型

PHP文件上传error的错误类型 - $_FILES['file']['error'] 有以下几种类型 1、UPLOAD_ERR_OK 其值为 0,没有错误发生,文件上传成功。 2、UPLOAD_ERR_INI_SIZE 其值为 1,上传的文件超过了 ph......

小良下山化了个缘
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部