今天学习了使用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. 比特币初始版本VC6.0编译

    1 源码下载 github上初始版本是bitcoin-0.1.5,可以从https://github.com/bitcoin/bitcoin下载,但是从网上可以找到更老版本bitcoin-0.1.0, ...

  2. M2 Daily SCRUM要求

    每个人的工作 (有work item 的ID):昨天已完成的工作,今天计划完成的工作:工作中遇到的困难. 燃尽图 照片 每人的代码/文档签入记录(不能每天都在 “研讨”, 但是没有代码签入) 如实报告 ...

  3. 这个不是第一次作业----艰难的安装Android studio历程

    之前只听说过eclipse,后来从室友处得知,还有一个安卓的开发工具叫做Android studio,上网百度后发现网友普遍说Android studio比eclipse快,没想太多,删E装A. 在装 ...

  4. 在局域网内部实现远程web终端服务

    在局域网内部实现远程web终端服务 前言 如题,本文主要介绍了在局域网内部实现访问web终端服务功能. 实验环境 如下图所示,实验环境由三个部分组成:分别由局域网内部客户端.重定向服务器.以及两台提供 ...

  5. 第四，五周——Java编写的电梯模拟系统（结对作业）

    作业代码:https://coding.net/u/liyi175/p/Dianti/git 伙伴成员:石开洪 http://www.cnblogs.com/shikaihong/(博客) 这次的作业 ...

  6. 在 SQL Server 中从完整路径提取文件名(sql 玩转文件路径)

    四个函数: --1.根据路径获取文件名 -- ============================================= -- Author: Paul Griffin -- Crea ...

  7. this 指向问题

    你不懂JS: this 与对象原型 第二章: this豁然开朗! 在第一章中,我们摒弃了种种对this的误解,并且学习了this是一个完全根据调用点(函数是如何被调用的)而为每次函数调用建立的绑定. ...

  8. OneZero第二次站立会议（2016.3.22）

    会议时间:2016年3月22日 9:33~9:57 会议成员:冉华,张敏,王巍,夏一鸣. 会议目的:汇报前一天工作,全体成员评论并修改. 会议内容:以下为会议插图 1.界面原型方面,小组成员对夏所画的 ...

  9. MacBook Pro 电池寿命

    MacBook Pro 电池寿命 https://www.apple.com/cn/macbook-pro/specs/ https://www.zhihu.com/question/19709979 ...

  10. 洛谷 P1852 [国家集训队]跳跳棋 解题报告

    P1852 [国家集训队]跳跳棋 题目描述 跳跳棋是在一条数轴上进行的.棋子只能摆在整点上.每个点不能摆超过一个棋子. 我们用跳跳棋来做一个简单的游戏:棋盘上有3颗棋子,分别在\(a\),\(b\), ...