HTML+CSS写下拉菜单
今天学习了使用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写下拉菜单的更多相关文章
- JS CSS写下拉菜单 竖行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
- CSS的下拉菜单被挡住，修改Z-INDEX也不成功
CSS的下拉菜单被挡住,修改Z-INDEX也不成功 做了一个鼠标放上去就出现的下拉菜单,但是这个下拉的内容被挡住了. Z-INDEX 是设置不同块的层次的,我修改了问题还是有. 后来发现是必须要把该便 ...
- 纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）
虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...
- 纯css实现下拉菜单
今天给大家分享一个纯html+css实现的下拉菜单.在此声明一点,源码并非出自本人之手,是同项目组一兄弟PLUTO写的.好东西嘛,所以果断拿出来和大家分享.如果有更好的想法或者建议,一定记得留言哦!好 ...
- 纯洁CSS实现下拉菜单和下拉容器（纯洁CSS导航栏和导航下拉容器）
虽然网上课程似即使案件大同小异,但我还是写,记笔记,也为您提供参考 我希望你能指导批评~~ 首先,我们必须列出ul li 开始我们的导航栏菜单也能说生产: 在下面的页面,我们先建XHTML结构体: & ...
- html5 css练习 下拉菜单制作
*{ margin: 0; padding: 0;}li{ list-style-type: none;}a{ text-decoration: none;}.ul1{marg ...
- 11.css定义下拉菜单
注意点: 1.设置a标签的width 和 height 的时候,直接设置是没用的,可以以这样两种方式设置 (1). display:block; (2). float:left; 2.设置下拉菜单,最 ...
- html/css 实现下拉菜单效果
demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
随机推荐
- SCRUM 12.09 软件工程第二周计划
第二轮迭代的第二周开始了,上一周我们进行了对代码优化的探索与自我审查. 本周,我们有以下两点目标要实现: 1.对客户端进行优化. 2.网络爬虫爬取美团外卖. 客户端优化主要开发人员:高雅智.牛强.彭林 ...
- 20135202闫佳歆--week6 进程的描述与创建--学习笔记
此为个人学习笔记存档! week 6 进程的描述与创建 一.进程的描述 1.进程控制块task_struct 以下内容来自视频课件,存档在此. 为了管理进程,内核必须对每个进程进行清晰的描述,进程描述 ...
- Believe
虽然上了一周的软件工程,可是还是不造软件工程是干什么的.听了一节gitlab,似懂非懂,感觉很高大上的样子,自己折腾了许久,还是没有进展,真心无奈. 真是件考验耐性的事~不过,so what?会成功的 ...
- php实现文件上传，下载的常见文件配置
配置文件,php.ini uploadfile post_max_size 规定表单上传的最大文件:
- Java认识对象
一.类与对象 java中有基本类型和类类型两个类型系统.Java撰写程序几乎都在使用对象,要产生对象必须先定义类,类是对象的设计图,对象是类的实例 1.定义类 类定义使用的关键词为class,建立实例 ...
- tp5+layui 实现上传大文件
前言: 之前所写的文件上传类通常进行考虑的是文件的类型.大小是否符合要求条件.当上传大文件时就要考虑到php的配置和服务器的配置问题.之前简单的觉得只要将php.ini中的表单上传的 大小,单脚本执行 ...
- [转帖] Linux运维基础知识学习内容
原作者地址:https://www.cnblogs.com/chenshoubiao/p/4793487.html 最近在学习 linux 对简单的命令有所掌握 但是 复杂的脚本 shell pyt ...
- NABCD模型
下面是我对我们团队实现的程序的最终期待. 1.N(Need) 这里做了用户需求,所面向的用户虽然是所有英语学习群体,但是主要用户还是那群英文小说阅读者,即希望通过英文小说的阅读来提升单词量的人群. 1 ...
- MyBatis分步查询的延迟加载
延迟加载的概念只存在于分步查询时: 延迟加载的本质是为第一步查询返回的Java Bean创建了一个代理对象: 延迟加载的全局设置有两个: lazyLoadingEnabled,作用为设置select语 ...
- Java学习之静态代码块
一.static(在方法区有一块固定的存储区域,由于优先于对象存在,所以可以被所有对象共享) 在定义方法的时候你写main方法的类加static, 写普通类的写方法的时候就不要加static 1.st ...