主要用到的知识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. SpringMvc快速入门之使用篇

    文章是为了结合工作需求来介绍springmvc,本文章只是切合实际的开发的场景对springmvc进行快速的入门介绍. 本篇文章不会对原理进行讲解.因为个人觉得有些对于新技术方面可以分为一下几个层次. ...

  2. 实例化flask的参数及对app的配置

    Flask 是一个非常灵活且短小精干的web框架 , 那么灵活性从什么地方体现呢? 有一个神奇的东西叫 Flask配置 , 这个东西怎么用呢? 它能给我们带来怎么样的方便呢? 首先展示一下: from ...

  3. Sqoop架构（四）

    Sqoop 架构是非常简单的,它主要由三个部分组成:Sqoop client.HDFS/HBase/Hive.Database. 下面是Sqoop 的架构图 (1)用户向 Sqoop 发起一个命令之后 ...

  4. MVC系列学习(六)-Razor语法

    注:本次代码加了样式,样式如下 <style>     div {         border: 1px solid red;         margin: 10px auto;    ...

  5. OFDM同步算法之Park算法

    park算法代码 训练序列结构 T=[\(C\) \(D\) \(C^{*}\) \(D^{*}\)],其中C表示由长度为N/4的复伪随机序列PN,ifft变换得到的符号序列 \(C(n) = D(N ...

  6. js基础---数字日期及运算

    显示年月日 var a=new Date; console.log(a); var year=a.getFullYear(); var month=a.getMonth()+1; var day=a. ...

  7. Win32子窗口的创建

    本文主要是在一个主窗口下创建一个子窗口.主窗口有一个菜单,菜单下只有设置一个选项,点击设置选项,弹出设置界面,点击设置界面关闭则关闭.我在开发的时候遇到两个问题,第一就是一点设置关闭就整个应用都关了, ...

  8. [Windows Server 2003] 服务器安全加固

    ★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频.★ 本节我们将带领大家:服务器安全加固 ...

  9. Java_Web三大框架之Hibernate+jsp+selvect+HQL登入验证

    刚开始接触Hibernate有些举手无措,觉得配置信息太多.经过一个星期的适应,Hibernate比sql简单方便多了.下面做一下Hibernate+jsp+selvect+HQL登入验证. 第一步: ...

  10. Mac OS 小知识

         删除Mac OS输入法中自动记忆的用户词组 有时候不小心制造了一个错误的词组,结果也被输入法牢牢记住,这时候可以用shift+delete组合键来删除      快捷键拾遗 Fn+Delet ...