主要用到的知识ul和li标签

ul li 是一个组合：是无序列表标签，在实际中用的非常多，
与之对应的是有序列表：ol li
li是不能单独使用，必须在于ul之中的
ul是块级元素，能直接定义宽高，而li是行级元素，不能直接定义高
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉框</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        #nav {
            width: 600px;
            height: 40px;
            margin: 0 auto;
        }

        #nav ul {
            list-style: none;
        }

        #nav ul li {
            float: left;
            line-height: 40px;
            text-align: center;
            position: relative;
        }

        #nav ul li a {
            text-decoration: none;
            color: #000;
            display: block;
            padding: 0px 10px;
        }

        #nav ul li a:hover {
            color: #FFF;
            background: #333
        }

        #nav ul li ul {
            position: absolute;
            display: none;
        }

        #nav ul li ul li {
            float: none;
            line-height: 30px;
            text-align: left;
        }

        #nav ul li ul li a {
            width: 100%;
        }

        #nav ul li ul li a:hover {
            background-color: #06f;
        }

        #nav ul li:hover ul {
            display: block
        }
    </style>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">学习中心</a>
            <ul>
                <li><a href="#">Oracle</a></li>
                <li><a href="#">MySQL</a></li>
                <li><a href="#">Python</a></li>
                <li><a href="#">mongodb</a></li>
                <li><a href="#">redis</a></li>
            </ul>
        </li>
        <li><a href="#">个人中心</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</div>

</body>
</html>

html简单实现下拉菜单的更多相关文章

  1. JQuery -&gt; 超级简单的下拉菜单

    使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...

  2. 在AJAX里 使用【 XML 】 返回数据类型 实现简单的下拉菜单数据

    在AJAX里 使用XML返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  3. 在AJAX里 使用【 JSON 】 返回数据类型 实现简单的下拉菜单数据

    在AJAX里 使用JSON返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  4. jquery实现最简单的下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 用js写的简单的下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. html下拉菜单的实现

    这是简单的下拉菜单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  7. 【Excle】动态更新数据下拉菜单

    现在我们制作了一个简单的下拉菜单,如下: 但是随着公司的逐渐扩大,部门也变得多了,目前我是把数据范围写死的 ,所有每次添加一个部门,就得修改数据范围,那么现在我们不想修改这个范围了,想让他每次添加部门 ...

  8. jq+css+html简单实现导航下拉菜单

    相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了,直接上code. Html部分 <div class="_nav"> <ul id=&qu ...

  9. html 布局；css3+jq 下拉菜单；table分页动态添加行；html5本地存储；简单易用的html框架

    简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...

随机推荐

  1. [App Store Connect帮助]一、 App Store Connect 使用入门（3）首页概述

    从首页可以访问 App Store Connect 的各个部分.您仅能访问每个部分中与您的用户职能相关联的功能. [提示]通过点按任何页面顶部的“App Store Connect”,您可以随时返回 ...

  2. 异常强大的Markdown编辑插件-Markdown Preview Enhanced

    最近使用Markdown写作,了解到以下这些Markdown写作工具 MaHua 在线markdown编辑器 百度搜索Markdown时,它排在非常靠前的位置 马克飞象- 专为印象笔记打造的Markd ...

  3. 安科 OJ 1054 排队买票 （递归，排列组合）

    时间限制:1 s 空间限制:128 M 题目描述 有M个小孩到公园玩,门票是1元.其中N个小孩带的钱为1元,K个小孩带的钱为2元.售票员没有零钱,问这些小孩共有多少种排队方法,使得售票员总能找得开零钱 ...

  4. 2018.10.9 logstash启动慢的问题解决

    问题描述: 线上部署logstash 启动非常缓慢,达到了10分钟 问题解决 忍无可忍 网上资料基本都是熵过低导致jruby启动缓慢的问题,需要安装haveged 参考https://www.jian ...

  5. BOM 标记

    BOM 是 Byte Order Mark 的简称,即字节序标记.用于标记文本流: 表示文本流的字节顺序,是小端序(little-endian)还是大端序(big-endian); 表示文本流是 Un ...

  6. Android彻底组件化demo发布

    今年6月份开始,我开始负责对"得到app"的android代码进行组件化拆分,在动手之前我查阅了很多组件化或者模块化的文章,虽然有一些收获,但是很少有文章能够给出一个整体且有效的方 ...

  7. VC窗口类的销毁-是否需要delete

    Windows窗口如果使用new的方法添加之后,在父窗口析构的时候,有些需要delete有些却不需要delete.这个的确有点坑,由于c++的实现,对于每个自己new的对象,我都会delete删除它, ...

  8. x264

    x264 x264  h264  1. x264调用主要过程 x264_param_default():设置参数集结构体x264_param_t的缺省值. x264_picture_alloc():为 ...

  9. JS——三元表达式

    三元表达式: var n1 = 2 > 3 ? true : false; alert(n1);//返回false

  10. shell编程之grep命令的使用

    大家在学习正则表达式之前,首先要明确一点,并把它牢牢记在心里,那就是: 在linux中,通配符是由shell解释的,而正则表达式则是由命令解释的,不要把二者搞混了.切记!!! 通常有三种文本处理工具/ ...