html+css实现二级导航栏效果，简单易看懂噢！

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

使用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实现二级导航栏效果，简单易看懂噢！的更多相关文章

纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,
HTML代码如下 <div id="nav"><dl class="sy"><dt> ...
纯CSS实现二级导航下拉菜单--css的简单应用
思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...
html css二级导航栏
二级导航栏制作: 1.将一级导航栏去除列表样式(list-style:none),并给予浮动,使其横向排列(float:left) 2.给每个li中添加一个<a></a>标签, ...
【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...
【分享】纯jQuery实现星巴克官网导航栏效果
前言大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图要写的就是最上方的会闪现的白色条条效果分析 1.在滚动条往下拉到一定距 ...
移动端如何用swiper实现导航栏效果
在移动端如何用swiper实现导航栏效果我们在写移动端的时候会有滑动和点击导航后滑动到目标页面功能:而这个功能如果自己写的话会很麻烦,所以我在这推荐一下swiper这个插件. 其实swiper中的官 ...
【方法】纯jQuery实现星巴克官网导航栏效果
前言大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图要写的就是最上方的会闪现的白色条条效果分析 1.在滚动条往下拉到一定距 ...
JS写的二级导航栏（利用冒泡原理）
今天给大家分享一种用JS写的导航栏,虽然我们工作中不会使用JS来做导航栏,为了练习我们用JS来做一个JS导航栏这种方法要比其他方法代码量少很多,但是需要对事件冒泡有一定的理解,如果需要理解冒泡可以参 ...
纯CSS制作二级导航
一.问题描述做一个类似校园网首页,主要是导航栏的设置,ul默认纵向排列,如何横向排列,同时去掉圆点. 二.问题解决 2.1 先写导航条用两个ul嵌套,一个ul是横向导航条,另一个是每个小项目下连一 ...
使用Vue来制作导航栏超级简单
在我们还没有学习Vue的时候一般都是使用JQ来制作导航栏,但是太复杂. 而使用Vue 来制作你会发现异常简单话不多说上代码 css代码随便写一写样式 HTML 部分,要给div设置一个ID 这里面 ...

随机推荐

salesforce零基础学习（一百二十二）通过 excel / csv创建 object
本篇参考: https://help.salesforce.com/s/articleView?id=sf.dev_objectcreate_task_lex_from_spreadsheet.htm ...
FutureTask 类
更多内容,前往IT-BLOG 一.什么是 Future和 FutureTask FutureTask 的 Future就源自于它的异步工作机制,如果我们在主线程中直接写一个函数来执行任务,这是同步的任 ...
RMQ总结
题目描述给定N个数的序列和M次询问,每次询问给定左右端点区间中的最大值输入样例: 6 (N) 34 1 8 123 3 2 4 (M) 1 2 1 5 3 4 2 3 输出样例: 34 123 1 ...
RochyLinux 8.6安装Oracle19c Client
一.环境准备 1.1 软件下载下载地址:https://www.oracle.com/database/technologies/oracle19c-linux-downloads.html 其中c ...
.net6的IIS发布部署
1.打开控制面板,打开程序 2.点击启动或关闭windows功能 3.在其中选择要设置的IIS功能 4.重启IIS服务 5.发布项目 6.在开始菜单搜索IIS,点击IIS管理器 7.右击网站,点击添加 ...
EF Core 使用Azure App Service中的In-App MySQL服务
Azure App Service 提供了一个应用内的MySQL,可以供测试.开发使用. 前提条件是需要使用Windows的操作系统. 创建完App Server 之后,只需要在设置下开启 MySQL ...
IIS 部署.NET CORE 项目出现 HTTP 错误 500.19 - Internal Server Error
当出现这个错误时是因为服务器上没有.NET CORE对应的SDK以及运行时文件,我的.NET CORE版本是2.2,下载的就是2.2对应的文件. 附上.NET CORE2.2版本的下载链接下载 .N ...
电脑上跨平台的电子书阅读器Koodo Reader
https://wbsu2003.gitee.io/2021/04/30/%E7%94%B5%E8%84%91%E4%B8%8A%E8%B7%A8%E5%B9%B3%E5%8F%B0%E7%9A%84 ...
Go语言实现分布式对象存储系统
实现一个可扩展的,简易的,分布式对象存储系统存储系统介绍先谈谈传统的网络存储,传统的网络存储主要分为两类: NAS,即Newtwork Attached Storage,是一个提供了存储功能和文件 ...
一个基于Java线程池管理的开源框架Hippo4j实践
@ 目录概述定义线程池痛点功能框架概览架构部署 Docker安装二进制安装运行模式依赖配置中心接入流程个性化配置线程池监控无中间件依赖接入流程服务端配置三方框架线程池 ...

html+css实现二级导航栏效果，简单易看懂噢！

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

随机推荐

热门专题