这应该是这几天以来看到的最简单易懂的有二级菜单栏的导航栏效果实现了

使用html+css实现，看了好几天导航栏的实现方式，要么是太复杂的需要JS或者框架的，要么是太简单仅仅使用div和超链接的，

再要么就是只有简单的一级导航，没有二级菜单栏的，心情复杂

就想找一个有二级菜单栏，使用html+css实现，使用无序列表ul+浮动实现的，今天总算是找到了，赶紧拿来练练手

代码是很简单，感觉可以当做模版来做，之后记录一下样式的设置，稍加修改就好了

话不多说，直接上代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        a{

            text-decoration: none;

        }

        li{

            list-style: none;

        }

        .nav{

            width: 600px;

            height: 40px;

            background-color: black;

            margin: 40px auto 0;

        }

        .nav li{

            float: left;

            margin-right: 10px;

            margin-left: 10px;

            position: relative;

        }

        .nav li a{

            display: block;

            height: 40px;

            width: 100px;

            text-align: center;

            background-color: #c1727f;

            line-height: 40px;

            color: #fff;

        }

        .nav li .nav2{

            display: none;

            left: -10px;

        }

        .nav li .nav2 li a{

            background-color: orange;

        }

        .nav li .nav2 li a:hover{

            background-color: #c1727f;

        }

        .nav li a:hover{

            background-color: lightcoral;

        }

        .nav li:hover .nav2{

            display: block;

            position: absolute;

        }

        .banner{

            width: 800px;

            height: 350px;

            margin: 0 auto;

            background: yellow;

            line-height: 350px;

            text-align: center;

            font-size: 30px;

        }

    </style>

</head>

<body>

    <ul class="nav">

        <li>

            <a href="#">产品中心</a>

            <ul class="nav2">

                <li><a href="#">产品1</a></li>

                <li><a href="#">产品2</a></li>

                <li><a href="#">产品3</a></li>

            </ul>

        </li>

        <li>

            <a href="#">游戏中心</a>

            <ul class="nav2">

                <li><a href="#">产品1</a></li>

                <li><a href="#">产品1</a></li>

                <li><a href="#">产品1</a></li>

            </ul>

        </li>

        <li>

            <a href="#">电影中心</a>

            <ul class="nav2">

                <li><a href="#">产品1</a></li>

                <li><a href="#">产品1</a></li>

                <li><a href="#">产品1</a></li>

            </ul>

        </li>

        <li>

            <a href="#">娱乐中心</a>

            <ul class="nav2">

                <li><a href="#">产品1</a></li>

                <li><a href="#">产品1</a></li>

                <li><a href="#">产品1</a></li>

            </ul>

        </li>

        <li>

            <a href="#">教育中心</a>

            <ul class="nav2">

                <li><a href="#">产品1</a></li>

                <li><a href="#">产品1</a></li>

                <li><a href="#">产品1</a></li>

            </ul>

        </li>

    </ul>

    <div class="banner">

        轮播图

    </div>

</body>

</html>

稍加解释：无序列表嵌套实现二级菜单，样式设置定位，把握好宽高及边距即可

效果图如下：

完毕。

html+css实现二级导航栏效果，简单易看懂噢！的更多相关文章

  1. 纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,

    HTML代码如下 <!-- 头部导航栏开始--><div id="nav"><dl class="sy"><dt> ...

  2. 纯CSS实现二级导航下拉菜单--css的简单应用

    思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...

  3. html css二级导航栏

    二级导航栏制作: 1.将一级导航栏去除列表样式(list-style:none),并给予浮动,使其横向排列(float:left) 2.给每个li中添加一个<a></a>标签, ...

  4. 【源码分享】jquery+css实现侧边导航栏

    jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...

  5. 【分享】纯jQuery实现星巴克官网导航栏效果

    前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...

  6. 移动端如何用swiper实现导航栏效果

    在移动端如何用swiper实现导航栏效果 我们在写移动端的时候会有滑动和点击导航后滑动到目标页面功能:而这个功能如果自己写的话会很麻烦,所以我在这推荐一下swiper这个插件. 其实swiper中的官 ...

  7. 【方法】纯jQuery实现星巴克官网导航栏效果

    前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...

  8. JS写的二级导航栏（利用冒泡原理）

    今天给大家分享一种用JS写的导航栏,虽然我们工作中不会使用JS来做导航栏,为了练习我们用JS来做一个JS导航栏 这种方法要比其他方法代码量少很多,但是需要对事件冒泡有一定的理解,如果需要理解冒泡可以参 ...

  9. 纯CSS制作二级导航

    一.问题描述 做一个类似校园网首页,主要是导航栏的设置,ul默认纵向排列,如何横向排列,同时去掉圆点. 二.问题解决 2.1 先写导航条 用两个ul嵌套,一个ul是横向导航条,另一个是每个小项目下连一 ...

  10. 使用Vue来制作导航栏超级简单

    在我们还没有学习Vue的时候一般都是使用JQ来制作导航栏,但是太复杂. 而使用Vue 来制作你会发现异常简单话不多说上代码 css代码随便写一写样式 HTML 部分,要给div设置一个ID   这里面 ...

随机推荐

  1. 7.远程代码执行漏洞RCE

    远程代码执行漏洞RCE 1.RCE Remote Code Execute 远程代码执行 Remote Command Execute 远程命令执行 2.危害 窃取服务器的敏感数据.文件 对电脑的文件 ...

  2. 你需要知道的Symbols

    著名symbol 著名symbol是一个在不同领域中都相同且未注册的symbol.如果我们要列出著名symbol,它们会是: Symbol.iterator Symbol.toStringTag Sy ...

  3. Java 8 中需要知道的4个函数式接口-Function、Consumer、Supplier、Predicate

    前言 Java 8 中提供了许多函数式接口,包括Function.Consumer.Supplier.Predicate 等等.这 4 个接口就是本篇将要分享的内容,它们都位于 java.util.f ...

  4. SimpleAdmin手摸手教学之：项目架构设计2.0

    一.说明 在SimpleAdmin1.0版本中,我将整体项目结构分为三大块,分别为架构核心.业务模块和应用服务.随着1.0版本的封版,回去再看我之前的项目架构,也暴露了一些问题,比如在1.0版本中,S ...

  5. Kubernetes（k8s）二进制高可用安装脚本

    好久没写公众号了,昨天新写了一个v1.24版本的安装.写得不咋样,但是能用.最近不高产了,没灵感了 = . = 手动部署:https://github.com/cby-chen/Kubernetes ...

  6. Python安装-在Linux系统中使用编译进行安装

    Python安装-在Linux系统中使用编译进行安装 你可以使用Ubuntu自带的Python3,不过你不能自由的控制版本,还要单独安装pip3,如果你想升级pip3,还会出现一些让人不愉快的使用问题 ...

  7. 【CTF】关于 .init .fini .init_array .fini_array 日志 2019.7.16 pwn

    查找资料的高效性 retn 返回到栈顶地址 关于 .init .fini .init_array .fini_array 其中存放着的是在main函数执行前执行的代码,由__libc_start_ma ...

  8. 【Java SE】网络编程

    1. 网络编程概述 网络编程的目的:直接或者间接地通过网络协议与其他计算机实现数据交换,进行通讯. 网络编程两个主要的问题: ①如何精准地定位网络上的一台或多台主机,并定位主机上的特定应用 ②找到主机 ...

  9. jmeter参数化导致反斜杠（\）被转义

    前情提要:在用jmeter做接口测试时,对请求体进行参数化,执行结果报错.但在不参数化的情况下,执行结果成功,而且参数化后,请求中读取到的参数是正确的(执行失败与执行成功时的参数一致). 问题排查:参 ...

  10. Python精品书籍

    目录 Python精品书籍 * 参考资料 基础 Python编程:从入门到实践(第2版) 笨办法学_Python Coding for Kids: Python: Learn to Code with ...