完成效果：

这应该是很简单的纵向导航栏了。

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实现简单的纵向导航栏的更多相关文章

  1. css3新属性position: sticky 一分钟实现 导航栏悬停功能

    css3新属性position: sticky 一分钟实现 导航栏悬停功能 前言 正文 前言 想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn ...

  2. <转载>DIV+CSS position定位方法总结

    如何学习DIV+CSS布局之position属性 如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用 absolute. 任 ...

  3. html+css写出响应式侧边导航栏

    html部分:先写用div画好六个导航的卡片,再利用css添加响应效果 <div class='card-holder'> <div class='card-wrapper'> ...

  4. 利用CSS制作背景变色的横向导航栏

    1.表单 页面如下: <html> <head> <title>注册表单页面</title> </head> <body> &l ...

  5. HTML&CSS基础学习笔记1.11—导航栏

    上文我们介绍到的<a>标签,由于<a>标签可以用来跳转,所以我们可以拿<a>标签来生成网页的导航栏. 其实在实际运用中,<a>标签就经常会被用来生成导航 ...

  6. 简单设置 navgationbar(导航栏) 的 title 字体跟颜色

    NSDictionary *navbarTitleTextAttributes = [NSDictionary dictionaryWithObjectsAndKeys: [UIColor white ...

  7. div+css感悟

    div+css感觉很简单,可是真正做起来一些小细节把握不好,这个网页的布局也是完成不了的.今天学习了一些技巧方法现在分享下: 即一个原则,网页由一个个的大盒子组成,一个个的大盒子里面装着一个个的小盒子 ...

  8. CSS 笔记——导航栏、下拉菜单、提示工具

    8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...

  9. CSS：CSS 导航栏

    ylbtech-CSS:CSS 导航栏 1.返回顶部 1. CSS 导航栏 导航栏 熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单. 导航栏=链接 ...

随机推荐

  1. 国内安装helm

    helm repo remove stable helm repo add stable https://kubernetes.oss-cn-hangzhou.aliyuncs.com/charts ...

  2. pyautogui 文档（五）：截图及定位功能

    截图函数 PyAutoGUI可以截取屏幕截图,将其保存到文件中,并在屏幕中查找图像.如果您有一个小图像,例如需要单击并希望在屏幕上找到它的按钮,这将非常有用.这些功能由PyScreeze模块提供,该模 ...

  3. 微信小程序发布新版本时自动提示用户更新

    如图,当小程序发布新的版本后,用户如果之前访问过该小程序,通过已打开的小程序进入(未手动删除),则会弹出这个提示,提醒用户更新新的版本.用户点击确定就可以自动重启更新,点击取消则关闭弹窗,不再更新. ...

  4. mysql explain执行详解

    1).id列数字越大越先执行,如果说数字一样大,那么就从上往下依次执行,id列为null的就表是这是一个结果集,不需要使用它来进行查询.2).select_type列常见的有:A:simple:表示不 ...

  5. maven 实用的命令

    查询某个pom的来源: com.taobao.langyan langyan-client 命令: mvn dependency:tree -Dverbose -Dincludes=com.aliba ...

  6. CentOS7+CDH5.14.0安装全流程记录，图文详解全程实测-2设置SSH免密登录

    因为hadoop集群在安装的时候需要集群中所有机器的权限. 所以我们需要打通所有节点的ssh无密码登陆,思路是生成每台机子的密钥,集中在一个文件中,再分发到每台机子上. 为了确保下面的命令能顺利执行, ...

  7. python 基础 ----- 常用的方法

    one.将英文字符设置大小写 upper()  :将英文字符设置大写 lower()   :将英文字符设置小写 two.去掉字符串的首尾空格    不能去除字符串中间的空格偶 strip() : 去掉 ...

  8. vue全局API

    一.Vue.extend() 顾名思义  extend  继承,官方给出的解释是   (使用基础 Vue 构造器,创建一个“子类”.参数是一个包含组件选项的对象.) Vue构造器是指  vue是一个构 ...

  9. AOP-事物管理

    1. Spring AOP 模块为基于 Spring 的应用程序中的对象提供了事务管理服务

  10. 使用xhprof对php7程序进行性能分析

    Xhprof是facebook开源出来的一个php轻量级的性能分析工具,跟Xdebug类似,但性能开销更低,还可以用在生产环境中,也可以由程序开关来控制是否进行profile. 对于还在使用php5的 ...