主要用到的知识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. Java转大数据开发全套视频资料

    大数据在近两年可算是特别火,有很多人都想去学大数据,有java转大数据的,零基础学习大数据的.但是大数据真的好学吗. 我们先来了解一下什么是大数据. 大数据是指无法在一定时间内用常规软件工具对其内容进 ...

  2. 大圆那些事 LIBRARY_PATH和LD_LIBRARY_PATH环境变量的区别

    LIBRARY_PATH和LD_LIBRARY_PATH环境变量的区别 LIBRARY_PATH和LD_LIBRARY_PATH是Linux下的两个环境变量,二者的含义和作用分别如下: LIBRARY ...

  3. vue打包问题：Tip: built files are meant to be served over an HTTP server.

    npm run build之后,出现提示:Tip: built files are meant to be served over an HTTP server. Opening index.html ...

  4. 【知识总结】线性筛_杜教筛_Min25筛

    首先感谢又强又嘴又可爱脸还筋道的国家集训队(Upd: WC2019 进候选队,CTS2019 不幸 rk6 退队)神仙瓜 ( jumpmelon ) 给我讲解这三种筛法~~ 由于博主的鸽子属性,这篇博 ...

  5. Swift自适应布局（Adaptive Layout）教程

    通用的Storyboard 通用的stroyboard文件是通向自适应布局光明大道的第一步.在一个storyboard文件中适配iPad和iPhone的布局在iOS8中已不再是梦想.我们不必再为不同尺 ...

  6. 【Spring】AOP

    AOP 编程允许你把遍布应用各处的功能分离出来形成可重用的组件,将安全.事务和日志关注点与你的核心业务逻辑相分离. 面向切面编程往往被定义为促使应用程序分离关注点的一项技术.系统由许多不同组件组成,每 ...

  7. Skeleton Screen — 骨架屏

    用户体验一直是前端开发需要考虑的重要部分,在数据请求时常见到锁屏的loading动画,而现在越来越多的产品倾向于使用Skeleton Screen Loading(骨架屏)替代,以优化用户体验. Sk ...

  8. html——细线表格

    细线: 1.table表格设置背景色 2.table中设置单元格距离 3.tr标签设置另外一种背景色 <!DOCTYPE html> <html> <head lang= ...

  9. ddrmenu

    <%@ Register TagPrefix="dnn" TagName="MENU" Src="~/DesktopModules/DDRMen ...

  10. 170925_1 Python socket 创建TCP的服务器端和客户端

    [Python版本]3.6 [遇到的问题] 客户端和服务器端都遇到:TypeError: a bytes-like object is required, not 'str' [解决方案] 参考:ht ...