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

使用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. DES算法流程

    初始置换IP 表格的使用方法: 将输入的64bit的明文从1开始标号,依次放入到IP初始置换表中数字对应的位置.填充完毕后,按照行优先的顺序从第1行开始依次读取获得输出. 16轮轮结构 整体结构 因为 ...

  2. 通过使用chatgpt 逐步解决egg项目学习的一些问题【笔记】

    我的需求提问 创建一个html页面,这个页面包括通过学生id查询学生详情的组件,和通过学生姓名,身份证,选择班级的组件,并把代码告诉我 chatgpt回答 好的,以下是一个包含两个组件的HTML页面, ...

  3. react中类组件、函数组件、state、单层遍历、多层遍历、先遍历后渲染、if-else、三目运算符

    1.回顾 module.exports = { entry: {}, output: {}, plugins: [], module: {}, resolve: {}, devServe: {} } ...

  4. PDD也可以通过ID获取商品详情？

    先我们可以通过pinduoduo.item_get的接口传入商品的ID参数,这个接口可以获取到拼多多商品的详情数据,包括商品的标题.价格.原价.卖家的昵称.库存.销量.宝贝的链接.商品的备注.宝贝图片 ...

  5. 【性能优化】优雅地优化慢查询：缓存+SQL修改组合拳

    问题描述 单例数据库模式中,后端高并发请求多(读多写少),导致数据库压力过大,关键接口响应变慢,严重影响体验. 需求 减少接口的响应时间. 寻找解决方案 由于问题主要处在数据库压力过大的情况,采用两种 ...

  6. etcd/raft选举源码解读

    ETCD-raft笔记 0. 引言 该篇博客基于etcd v3.5.7版本,首先会简单介绍etcd/raft对Raft选举部分的算法优化,然后通过源码分析etcd/raft的选举实现. 1. etcd ...

  7. GPFS 文件系统部署步骤

    GPFS 文件系统部署步骤 参考文档: 简书网友提供: https://www.jianshu.com/p/a0ecc0838b3b?utm_campaign=maleskine&utm_co ...

  8. mysql迁移：mysqldump导出表结构及数据

    问题描述:有需要mysql某几张表的需求,某个数据库某几张表,导出先检查相应的数据库和表是否存在 数据泵用法:默认导出的是表结构以及表中的数据 mysqldump -uroot -p -S /data ...

  9. vue自定义密码输入框解决浏览器自动填充密码的问题

    pre { overflow-y: auto; max-height: 300px } img { max-width: 500px; max-height: 300px } 问题描述 浏览器对于ty ...

  10. 使用vue-cli创建第一个vue项目

    命令提示符切换至需要创建项目的目录: 直接在路径输入cmd在按键盘的enter键打开的终端就直接切换到该目录下 (1)输入以下命令: vue create 项目名称 (2)我这里选手动选择,键盘上下按 ...