div+css+position实现简单的纵向导航栏
完成效果：
这应该是很简单的纵向导航栏了。
OK，进入正题
首先，我们看上面的效果图可以分析得出，要实现这个效果需要用到的技术点
1.hover
2.position
3.布局
我认为在这个效果的实现上最需要注意的就是position,当我们在给子元素用absolute的时候，一定不要忘了个其父元素设置relative,否则容易出错，这里可以简单记为“父相子绝”
ok，看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style type="text/css">
.all{
position: fixed;
top: 100px;
left: 20px;
}
/*父元素*/
.menu{
width: 50px;
height: 50px;
border-bottom: 1px solid #6A6A6A;
background-color: #43433E;
text-align: center;
position: relative;
}
a{
display: block;
width: 50px;
height: 50px;
text-decoration: none;
color: white;
line-height: 50px;
}
/*子元素*/
.son{
width: 150px;
height: 50px;
color: white;
text-align: center;
background-color: #43433E;
position: absolute;
left: 60px;
top: 0;
display: none;
}
a:hover{
background-color: #FA7C03;
}
.menu:hover .son{
display: block;
}
</style>
</head>
<body>
<div class="all">
<div class="menu">
<a href="#"><span>早上</span></a>
<div class="son">
<p>吃饭，喝水</p>
</div>
</div>
<div class="menu">
<a href="#"><span>中午</span></a>
<div class="son">
<p>吃饭，喝水</p>
</div>
</div>
<div class="menu">
<a href="#"><span>晚上</span></a>
<div class="son">
<p>吃饭，喝水，喝牛奶</p>
</div>
</div>
</div>
</body>
</html>
div+css+position实现简单的纵向导航栏的更多相关文章
- css3新属性position: sticky 一分钟实现 导航栏悬停功能
css3新属性position: sticky 一分钟实现 导航栏悬停功能 前言 正文 前言 想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn ...
- <转载>DIV+CSS position定位方法总结
如何学习DIV+CSS布局之position属性 如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用 absolute. 任 ...
- html+css写出响应式侧边导航栏
html部分:先写用div画好六个导航的卡片,再利用css添加响应效果 <div class='card-holder'> <div class='card-wrapper'> ...
- 利用CSS制作背景变色的横向导航栏
1.表单 页面如下: <html> <head> <title>注册表单页面</title> </head> <body> &l ...
- HTML&CSS基础学习笔记1.11—导航栏
上文我们介绍到的<a>标签,由于<a>标签可以用来跳转,所以我们可以拿<a>标签来生成网页的导航栏. 其实在实际运用中,<a>标签就经常会被用来生成导航 ...
- 简单设置 navgationbar(导航栏) 的 title 字体跟颜色
NSDictionary *navbarTitleTextAttributes = [NSDictionary dictionaryWithObjectsAndKeys: [UIColor white ...
- div+css感悟
div+css感觉很简单,可是真正做起来一些小细节把握不好,这个网页的布局也是完成不了的.今天学习了一些技巧方法现在分享下: 即一个原则,网页由一个个的大盒子组成,一个个的大盒子里面装着一个个的小盒子 ...
- CSS 笔记——导航栏、下拉菜单、提示工具
8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...
- CSS：CSS 导航栏
ylbtech-CSS:CSS 导航栏 1.返回顶部 1. CSS 导航栏 导航栏 熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单. 导航栏=链接 ...
随机推荐
- select简单循环嵌套
访问学生的物理最高成绩,并且打印出来,单个要打印出所有的信息 在添加几个 and 就可以啦. select student.gender,student.sname from student whe ...
- CentOS7 yum安装配置 drbd-84-utils （外部模式）
1 安装环境介绍 1.1 系统环境 内核:3.10.0-862.el7.x86_64 版本:CentOS Linux release 7.5.1804 (Core) 主服务器:hostname = ...
- Vue项目碰到"‘webpack-dev-server’不是内部或外部命令，也不是可运行的程序或批处理文件"报错
解决办法: 最后将项目里的“node_modules”文件夹删除,然后在cmd中cd到项目目录,依次运行命令:npm install和npm run build,最后运行npm run dev后项目成 ...
- 设计模式之jdk动态代理模式、责任链模式-java实现
设计模式之JDK动态代理模式.责任链模式 需求场景 当我们的代码中的类随着业务量的增大而不断增大仿佛没有尽头时,我们可以考虑使用动态代理设计模式,代理类的代码量被固定下来,不会随着业务量的增大而增大. ...
- 编辑gif
在撰写文档的过程中,为了清晰的表述我们的内容经常会加入一些图片.对于 `.jpg` 或 `.png` 的静态图我们可以直接 使用windows自带的照片编辑器编辑即可.对于如 licecap 录制出来 ...
- 天然气管道Gaz[POI2007]
--BZOJ1034 题目描述 Mary试图控制成都的天然气市场.专家已经标示出了最好的天然气井和中转站在成都的地图.现在需要将中转 站和天然气井连接起来.每个中转站必须被连接到正好一个钻油井,反之亦 ...
- java 日志体系（四）log4j 源码分析
java 日志体系(四)log4j 源码分析 logback.log4j2.jul 都是在 log4j 的基础上扩展的,其实现的逻辑都差不多,下面以 log4j 为例剖析一下日志框架的基本组件. 一. ...
- n2n网络环境搭建
目的: 实现家中nas,在任何环境ssh访问 方案:n2n v1 (原因稳定&兼容macbook) 开源地址: https://svn.ntop.org/svn/ntop/trunk/n2 ...
- ArrayAdapter构造方法中的textViewResourseId
simple_list_item_1:每个列表项都是一个普通的textView simple_list_item_2:每个列表项都是一个普通的textView(字体略大) simple_list_it ...
- python3 利用pip命令安装包和模块
本文介绍如何利用pip命令安装Python相关的包和模块.在Python中有些方法或者模块是自带的功能,也叫(build-in),内构函数,实际使用,可能内构函数或者模块不能完成我们的任务,我们就需要 ...