今天学习了使用HTML+CSS实现下拉菜单效果，在这个例子中，我学到了如下知识点：

  • 设置背景图片（background-image、background-size）
  • 如何让无序列表横向显示（float:left）
  • 如何实现鼠标停留时，出现下拉菜单（:hover）
  • 相对定位和绝对定位（position:relative、absolute）

html和css代码分别如下：

<!DOCTYPE html>

<html>

<head>

    <title>Dropdown menu</title>

    <link rel="stylesheet" type="text/css" href="index5.css">

<body>

    <nav>

        <p>ptravels</p>

        <ul>

            <li><a href="#">Home</a></li>

            <li><a href="#">Portfolio</a>

                <ul>

                    <li><a href="#">Data analysis</a></li>

                    <li><a href="#">Artifical inteligence</a></li>

                    <li><a href="#">Web development</a></li>

                </ul>

            </li>

            <li><a href="#">About me</a></li>

            <li><a href="#">Contact</a></li>

        </ul>

    </nav>

</body>

</html>
* {

    margin:;

    padding:;

}

body {

    background-image: url('images/banner.jpg');

    background-size: cover;

}

nav {

    width: 100%;

    height: 60px;

    background-color: #fff;

}

nav p {

    font-family: arial;

    font-size: 24px;

    text-transform: uppercase;

    line-height: 55px;

    padding: 0 20px;

    float: left;

}

nav ul {

    float: left;

}

nav ul li {

    float: left;

    list-style: none;

    position: relative;

}

nav ul li a {

    display: block;

    font-family: arial;

    font-size: 14px;

    padding: 22px 10px;

    text-decoration: none;

}

nav ul li ul {

    display: none;

    position: absolute;

    background-color: #fff;

    padding: 10px;

    border-radius: 0px 0px 4px 4px;

}

nav ul li:hover ul {

    display: block;

}

nav ul li ul li {

    width: 160px;

    border-radius: 4px;

}

nav ul li ul li a {

    padding: 8px 10px;

}

nav ul li ul li a:hover {

    background-color: #f3f3f3;

}

最终效果：

参考链接：
[1] https://www.youtube.com/watch?v=rgUp302f_lY&index=41&list=PL0eyrZgxdwhwNC5ppZo_dYGVjerQY3xYU

HTML+CSS写下拉菜单的更多相关文章

  1. JS CSS写下拉菜单 竖行

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  3. CSS的下拉菜单被挡住，修改Z-INDEX也不成功

    CSS的下拉菜单被挡住,修改Z-INDEX也不成功 做了一个鼠标放上去就出现的下拉菜单,但是这个下拉的内容被挡住了. Z-INDEX 是设置不同块的层次的,我修改了问题还是有. 后来发现是必须要把该便 ...

  4. 纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

    虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...

  5. 纯css实现下拉菜单

    今天给大家分享一个纯html+css实现的下拉菜单.在此声明一点,源码并非出自本人之手,是同项目组一兄弟PLUTO写的.好东西嘛,所以果断拿出来和大家分享.如果有更好的想法或者建议,一定记得留言哦!好 ...

  6. 纯洁CSS实现下拉菜单和下拉容器（纯洁CSS导航栏和导航下拉容器）

    虽然网上课程似即使案件大同小异,但我还是写,记笔记,也为您提供参考 我希望你能指导批评~~ 首先,我们必须列出ul li 开始我们的导航栏菜单也能说生产: 在下面的页面,我们先建XHTML结构体: & ...

  7. html5 css练习 下拉菜单制作

    *{    margin: 0;    padding: 0;}li{    list-style-type: none;}a{    text-decoration: none;}.ul1{marg ...

  8. 11.css定义下拉菜单

    注意点: 1.设置a标签的width 和 height 的时候,直接设置是没用的,可以以这样两种方式设置 (1). display:block; (2). float:left; 2.设置下拉菜单,最 ...

  9. html/css 实现下拉菜单效果

    demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. 20181204-4 互评Final版本

    此次作业要求参见https://edu.cnblogs.com/campus/nenu/2018fall/homework/2478 互评 一.互评Final版本——杨老师粉丝群<PinBall ...

  2. 【Alpha】第三次Scrum meeting

    今日任务一览: 导航栏诞生 前期准备的Latex文本将撰写完毕 生成燃尽图的问题已经解决 姓名 今日完成任务 所耗时间 刘乾 用Github成功生成了燃尽图(真是不容易啊...),与架构师继续每日面基 ...

  3. 20135202闫佳歆--week5 课本18章学习笔记

    第十八章 调试 内核级开发的调试工作远比用户级开发艰难的多. 一.准备开始 准备工作需要的是: 一个bug 一个藏匿bug的内核版本 相关内核代码的知识和运气 在这一章里,调试的主要思想是让bug重现 ...

  4. Linux内核分析 笔记四 系统调用的三个层次 ——by王玥

    一.知识点总结 (一)用户态.内核态和中断 1.内核态:在高的执行级别下,代码可以执行特权指令,访问任意的物理地址,这时的CPU就对应内核态 2.用户态:在低级别的指令状态下,代码 只能在级别允许的特 ...

  5. team330团队铁大兼职网站使用说明

    项目名称:铁大兼职网站 项目形式:网站 网站链接:http://39.106.30.16:8080/zhaopinweb/mainpage.jsp 开发团队:team330 网站上线时间:2018年1 ...

  6. C语言版本：单链表的实现

    slist.h #ifndef __SLIST_H__ #define __SLIST_H__ #include<cstdio> #include<malloc.h> #inc ...

  7. beta yz 5

    031602111 傅海涛 1.今天进展 接口微调修正 2.存在问题 文档转化太久 3.明天安排 完成全部接口的交互 4.心得体会 文档转化需要好好优化 031602115 黄家雄 1.界面优化 2. ...

  8. d3 选择器

    一.隔了一段时间没看D3了,好多api又陌生了.武林太大,唯有自强不息. D3 选择器算是学习D3的第一步吧. 跟 学习JQ一样.先熟悉下api,才能够如鱼得水,手到勤来. 二. 选择器 1.选择器 ...

  9. TRichEdit怎样新增的内容到最后一行？

    Delphi里使用TRichEdit,使用SetSelTextBuf时可以设置显示的字体格式,但是显示位置是在当前的插入光标后,如果人为改变插入光标的位置,比如在其他位置单,以后再插入的内容位置就没办 ...

  10. 阿里云ECS提示RHSA-2017:3263: curl security update

    服务器配置: 原因阿里云安装的CentOS 7.3的curl和libcurl的源不是最新的,会导致安全漏洞出现 方法首先还是要在实例列表远程连接打开终端. 1.更新ca-bundle1.备份: cp ...