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

使用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. GaussDB(DWS)运维：导致SQL执行不下推的改写方案

    摘要:本文就针对因USING子句的书写方式可能导致MERGE INTO语句的执行不下推的场景,对USING子句的SQL语句进行改写一遍,整个SQL语句可以下推. 本文分享自华为云社区<Gauss ...

  2. ASP.NET Core - 缓存之内存缓存(上)

    1. 缓存 缓存指的是在软件应用运行过程中,将一些数据生成副本直接进行存取,而不是从原始源(数据库,业务逻辑计算等)读取数据,减少生成内容所需的工作,从而显著提高应用的性能和可伸缩性,使用好缓存技术, ...

  3. 一步步制作下棋机器人之 coppeliasim进行Scara机械臂仿真与python控制

    稚晖君又发布了新的机器人,很是强大. 在编写时看到了稚晖君的招聘信息,好想去试试啊! 小时候都有一个科幻梦,如今的职业也算与梦想有些沾边了.但看到稚晖君这种闪着光芒的作品,还是很是羡慕. 以前就想做一 ...

  4. python进程之进程池、线程池与异步回调机制

    进程线程不可以无限制的创建,因为有硬件的限制.为了避免资源被程序消耗过度,可以使用进程池或线程池的技术. 池     降低程序的执行效率,但是保证了计算机硬件的安全 进程池     提前创建好固定数量 ...

  5. PHP利用 JSON 将XML转换为数组

    在很多开发项目中,我们都会遇到将XML文件转换为数组使用,因此在本篇 PHP教程 中,UncleToo和大家一起学习 如何转换XML为数组 . 现在有一个uncletoo.xml的配置文件,格式如下: ...

  6. Vue闪烁的问题

    问题: 当我们打开Vue页面的时候,如果弱网环境,会出现一个闪烁的效果 原因: Vue还来不及处理的模板 解决: 使用 v-cloak 来解决Vue这个打开页面的闪烁的问题 原理: 利用 v-cloa ...

  7. GPT-NER：通过大型语言模型的命名实体识别

    讲在前面,chatgpt出来的时候就想过将其利用在信息抽取方面,后续也发现了不少基于这种大语言模型的信息抽取的论文,比如之前收集过的: https://github.com/cocacola-lab/ ...

  8. 17-js代码压缩

    const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); modul ...

  9. Function-advanced

    函数进阶 1. 函数防抖 在频率触发的情况下 只有等待一定的时间才会触发 执行一次代码 特点 执行之前先清除之前的即将执行操作 保证只有最后一次生效 优化高频执行JS代码操作 提高性能 防抖代码实现 ...

  10. 进程间通信WebSocket 服务端未启动时，客户端重连报错

    当WebSocket服务端未启动时,我们在客户端申请连接,会报 System.Net.Sockets.SocketException 异常. 当然,我们调试时异常设置默认是不勾选这个的.所以不影响正常 ...