主要用到的知识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. css的一些命名规范

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...

  2. nodejs在windows下的安装

    Windowv 上安装Node.js Windows 安装包(.msi) : 32 位安装包下载地址 : http://nodejs.org/dist/v0.10.26/node-v0.10.26-x ...

  3. SAS学习笔记之《SAS编程与数据挖掘商业案例》（2）数据获取与数据集操作

    SAS学习笔记之<SAS编程与数据挖掘商业案例>(2)数据获取与数据集操作 1. SET/SET效率高,建立的主表和建表索引的查询表一般不排序, 2. BY语句,DATA步中,BY语句规定 ...

  4. brew update失败提示：/System/Library/Frameworks/Ruby.framework/的解决方法

    本文由@ray 出品,转载请注明出处.  文章链接:http://www.cnblogs.com/wolfray/p/8040701.html 想用brew安装wget,但是提示失败,然后想先 bre ...

  5. 如何学习Unity3D

      如何学习 第一步首先了解unity3d的菜单,视图界面.这些事最基本的基础,可以像学word操作一样,大致能明白有几个菜单,几个基本的视图,各自起什么作用的就可以了. 第二步理解场景里面的坐标系统 ...

  6. JS——事件的绑定与解绑

    1.绑定形式 ele.addEventListener(evtName, fn) ele["on" + evtName] = function () {} ele.onclick ...

  7. PHP 之simple_html_dom实现网页数据采集

    <?php set_time_limit(0); include './simple_html_dom.php'; $url = 'https://price.pcauto.com.cn/pri ...

  8. js常用方法和技巧

    随着AJAX的流行,js又得到了很多人的重视,js最大的优势就是它能够对html上的所有元素进行操作,包括创建标签元素,更改元素属性等,这样就使得我们能够利用js来实现很多的动态效果,来提供给用户更强 ...

  9. CAD保存高版本的dwg（com接口）

    主要用到函数说明: MxDrawXCustomFunction::Mx_SaveDwgEx 保存DWG文件,可以设置保存的文件版本号和密码,详细说明如下: 参数 说明 IN CString sFile ...

  10. C3P0数据库连接池使用方法

    一.应用程序直接获取数据库连接的缺点 用户每次请求都需要向数据库获得链接,而数据库创建连接通常需要消耗相对较大的资源,创建时间也较长.假设网站一天10万访问量,数据库服务器就需要创建10万次连接,极大 ...