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

使用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. Python通过ssh登录实现报文监听

    Python自动化ssh登录目标主机,实现报文长度length 0监听,并根据反馈信息弹窗报警: 代码比较简陋,后续记得优化改进. #_*_coding:utf-8 _*_ #!/usr/bin/py ...

  2. Django-5

    Django-5 1.Coookie 1.1 什么是cookie Cookie是储存在浏览器端的一小段文本数据(键值对). 被广泛用于在网站之间传输信息, 当您访问一个网站时,它会将一个Cookie发 ...

  3. Cesium 后处理（Post Process）

    原文地址:https://blog.csdn.net/ls870061011/article/details/123910821 作者:GIS李胜 为实现三维模型的更炫.更酷.更美观,Cesium在1 ...

  4. 网页静态化技术 Freemarker

    网页静态化解决方案在实际运用中比较多,例如新闻网站,门户网站中的新闻频道或者是文章类的频道.对于电商网站的商品详细页(几百万的商品,同样的页面模板格局)来说,每个商品又有大量的信息,这样的情况同样也适 ...

  5. [C++STL教程]1.vector容器是什么？实用教程来啦！超简单易懂，拿来就用

    C++与传统的C语言有一个很大的区别,就是新增了标准模板库 STL(Standard Template Library),它是 C++ 标准库的一部分,不需要单独安装,只需要 #include 对应的 ...

  6. Redis高频40问

    Redis连环40问,绝对够全! Redis是什么? Redis(Remote Dictionary Server)是一个使用 C 语言编写的,高性能非关系型的键值对数据库.与传统数据库不同的是,Re ...

  7. VBA GET POST HTTP VBA网络爬虫 最新Excel自动获取股票信息源码 EXCEL自动获取网络数据 最新VBA自动抓取股票数据源码

    最新Excel自动获取股票信息源码 EXCEL自动获取网络数据 最新VBA自动抓取股票数据源码 通过接口获取股票数据内容的主要优点包括以下几点: 实时性高:通过访问股票数据接口,可以实时获取到股票的实 ...

  8. ICMP隐蔽隧道攻击分析与检测（三）

    • ICMP隧道攻击工具特征分析 一.原理 由于ICMP报文自身可以携带数据,而且ICMP报文是由系统内核处理的,不占用任何端口,因此具有很高的隐蔽性. 通过改变操作系统默认填充的Data,替换成自己 ...

  9. 【开源项目】合肥~超经典智慧城市CIM/BIM数字孪生可视化项目—开源工程及源码

    最新消息,数字孪生智慧宁波开源了其数据工程源码和工程,免费送出供大家学习.使用.分享. ​ 智慧宁波实现了一系列全面的功能,如实现长三角经济圈特效.智慧地铁特效.智慧灯杆特性等.这些项目利用数字孪生技 ...

  10. Django笔记十八之save函数的继承操作和指定字段更新等实例方法

    本文首发于微信公众号:Hunter后端 原文链接:Django笔记十八之save函数的继承操作和指定字段更新等实例方法 这篇笔记主要介绍 Django 一些实例方法. 什么是 实例,我们知道通过fil ...