html - 使用纯CSS创建三级菜单-6ren

html - 使用纯CSS创建三级菜单

转载作者：太空宇宙更新时间：2023-11-04 06:39:58

我正在使用纯 CSS 来创建多级菜单。我使用以下代码生成代码:

html

<div class="main">
            <ul class="mainnav">
               <li><a href="/files/public/" ><i class="fa fa-home"></i></a></li>

                <li class="hassubs"><a href="#">Master Entry <i class="fa fa-caret-down" aria-hidden="true"></i></a>
                    <ul class="dropdown">
                       <li class="subs hassubs"><a href="#">Master Entry</a>
                            <ul class="dropdown">

                              <li class="subs"><a href="/files/public/master_entry/create/">Size</a></li>
                              <li class="subs"><a href="/files/public/master_entry/index/">Color</a></li>
                              <li class="subs"><a href="/files/public/master_entry/index/">Unit</a></li>
                              <li class="subs"><a href="/files/public/master_entry/index/">Process Group</a></li>
                            </ul>
                        </li>
</ul>
</div>

我在代码中使用了以下 CSS:

.main{width: 100%; background: #eee;}
/*General Menu Styling*/
.mainnav{margin: 0 auto}
li{list-style: none;}
li a{text-decoration: none;}
.dropdown{position: absolute; width: 150px;top: 41px; opacity: 0;visibility: hidden;transition: ease-out .35s;-moz-transition: ease-out .35s;-webkit-transition: ease-out .35s;}
.mainnav li{float: left;padding: 4px;background: black;border-left: 1px dotted #fff;height:45px;}
.mainnav li:first-child{border: none;}
.mainnav li a{ display: block;padding: 8px 20px;color: #fff;font-family: arial;}
.mainnav li:hover{background: #E87944;transition: ease-in .35s;-moz-transition: ease-in .35s;-webkit-transition: ease-in .35s;}
.mainnav li:hover a{color: #fff;transition: ease-in .35s;-moz-transition: ease-in .35s;-webkit-transition: ease-in .35s;}
/*First Level*/
.subs {left: -45px;position: relative;top: 0px;width: 175px;border-left: none !important; border-bottom: 1px dotted #fff !important;}
.subs:last-child{border: none !important;}
.hassubs:hover .dropdown,.hassubs .hassubs:hover .dropdown{opacity: 1;visibility: visible; transition: ease-in .35s;-moz-transition: ease-in .35s;-webkit-transition: ease-in .35s;}
.mainnav li:hover ul a,.mainnav li:hover ul li ul li a{color: white;}
.mainnav li ul li:hover,.mainnav li ul li ul li:hover{background: #E87944;transition: ease-in-out .35s;-moz-transition: ease-in-out .35s;-webkit-transition: ease-in-out .35s;}
.mainnav li ul li:hover a,.mainnav li ul li ul li:hover a{color: white;transition: ease-in-out .35s;-moz-transition: ease-in-out .35s;-webkit-transition: ease-in-out .35s;}
/*Second Level*/
.hassubs .hassubs .dropdown .subs{left: 25px;position: relative;width: 165px;top: 0px;}
.hassubs .hassubs .dropdown{position: absolute;width: 150px;left: 120px;top: 0px;opacity: 0;visibility: hidden;transition: ease-out .35s;-moz-transition: ease-out .35s;-webkit-transition: ease-out .35s;}

我想在链接 size 下创建三级菜单。我如何修改相同的 css。

最佳答案

已创建三级菜单，希望有用。

<!DOCTYPE html>
    <html>

    <body>
       <style>
          .main {
             width: 100%;
             background: #eee;
          }

          /*General Menu Styling*/
          .mainnav {
             margin: 0 auto
          }

          li {
             list-style: none;
          }

          li a {
             text-decoration: none;
          }

          .dropdown {
             position: absolute;
             width: 150px;
             top: 41px;
             opacity: 0;
             visibility: hidden;
             transition: ease-out .35s;
             -moz-transition: ease-out .35s;
             -webkit-transition: ease-out .35s;
          }

          .mainnav li {
             float: left;
             padding: 4px;
             background: black;
             border-left: 1px dotted #fff;
             height: 45px;
          }

          .mainnav li:first-child {
             border: none;
          }

          .mainnav li a {
             display: block;
             padding: 8px 20px;
             color: #fff;
             font-family: arial;
          }

          .mainnav li:hover {
             background: #E87944;
             transition: ease-in .35s;
             -moz-transition: ease-in .35s;
             -webkit-transition: ease-in .35s;
          }

          .mainnav li:hover a {
             color: #fff;
             transition: ease-in .35s;
             -moz-transition: ease-in .35s;
             -webkit-transition: ease-in .35s;
          }

          /*First Level*/
          .subs {
             left: -45px;
             position: relative;
             top: 0px;
             width: 175px;
             border-left: none !important;
             border-bottom: 1px dotted #fff !important;
          }

          .subs:last-child {
             border: none !important;
          }

          .hassubs:hover .dropdown,
          .hassubs .hassubs:hover .dropdown,
          .hassubs .hassubs .dropdown .subs:hover .dropdown {
             opacity: 1;
             visibility: visible;
             transition: ease-in .35s;
             -moz-transition: ease-in .35s;
             -webkit-transition: ease-in .35s;
          }

          .mainnav li:hover ul a,
          .mainnav li:hover ul li ul li a {
             color: white;
          }

          .mainnav li ul li:hover,
          .mainnav li ul li ul li:hover {
             background: #E87944;
             transition: ease-in-out .35s;
             -moz-transition: ease-in-out .35s;
             -webkit-transition: ease-in-out .35s;
          }

          .mainnav li ul li:hover a,
          .mainnav li ul li ul li:hover a {
             color: white;
             transition: ease-in-out .35s;
             -moz-transition: ease-in-out .35s;
             -webkit-transition: ease-in-out .35s;
          }

          /*Second Level*/
          .hassubs .hassubs .dropdown .subs {
             left: 25px;
             position: relative;
             width: 165px;
             top: 0px;
          }

          .hassubs .hassubs .dropdown,.hassubs .hassubs .dropdown .subs .dropdown {
             position: absolute;
             width: 150px;
             left: 120px;
             top: 0px;
             opacity: 0;
             visibility: hidden;
             transition: ease-out .35s;
             -moz-transition: ease-out .35s;
             -webkit-transition: ease-out .35s;
          }
       </style>
       <div class="main">
          <ul class="mainnav">
             <li><a href="/files/public/">Home<i class="fa fa-home"></i></a></li>
             <li class="hassubs"><a href="#">Master Entry <i class="fa fa-caret-down" aria-hidden="true"></i></a>
                <ul class="dropdown">
                   <li class="subs hassubs"><a href="#">Sub Master Entry</a>
                      <ul class="dropdown">
                         <li class="subs">
                            <a href="/files/public/master_entry/create/">Size</a>
                            <ul class="dropdown">
                               <li class="subs"><a href="/files/public/master_entry/create/">Size 1</a></li>
                               <li class="subs"><a href="/files/public/master_entry/create/">Size 2</a></li>
                            </ul>
                         </li>
                         <li class="subs">
                            <a href="/files/public/master_entry/index/">Color</a>
                            <ul class="dropdown">
                               <li class="subs"><a href="/files/public/master_entry/create/">Red</a></li>
                               <li class="subs"><a href="/files/public/master_entry/create/">Green/a></li>
                            </ul>
                         </li>
                         <li class="subs"><a href="/files/public/master_entry/index/">Unit</a></li>
                         <li class="subs"><a href="/files/public/master_entry/index/">Process Group</a></li>
                      </ul>
                   </li>
                </ul>
             </li>
       </div>

    </body>

    </html>

关于html - 使用纯CSS创建三级菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53880361/

文章推荐： php - 在 PHP 中转义 Python 字符串的最佳方法是什么？

文章推荐： php - 第二部分相同的 CSS 选择器

c# - [纯] 函数可以抛出异常吗？
可以抛出异常的函数可以有[pure]属性吗？最佳答案根据 https://msdn.microsoft.com/en-us/library/system.diagnostics.contracts
纯 CSS 推送导航不会隐藏
我使用的是纯 css 推送导航。它工作得很好，但是我不知道如何在单击导航链接时隐藏菜单。您必须手动单击菜单图标才能使菜单返回隐藏状态。但是，当单击链接并且站点跳转到某个部分时，我希望菜单自动滑入隐藏状
纯 CSS 下拉菜单项显示
我正在尝试让纯 CSS 下拉菜单正常工作。它在很大程度上确实有效，除了其他内容似乎显示出来但我不知道为什么。 http://jsfiddle.net/uQveP/4/ 有人可以告诉我我做错了什么吗？
纯 C 中的回调函数
这个问题在这里已经有了答案: What is a "callback" in C and how are they implemented? (9 个回答) 关闭 8 年前。我正在以这种方式实现回
html - 纯 HTML 后退按钮
我想在不使用 Javascript 或任何其他语言的情况下，使用 HTML 和 CSS 创建一个 Page Back Button。我想用纯 HTML 和 CSS 来完成。我进行了搜索，但每次代码中
prolog - 纯 Prolog 中的目标顺序
我对序言很陌生。据我所知，Pure Prolog 仅限于 Horn 子句。这是一个非常简单的序言程序 - % student( Snr , FirstName , LastName ,
html - 纯 CSS 加载指示器适合容器大小
我想在加载数据时对容器使用以下加载指示器。问题是， slider 具有固定的宽度和高度(300 像素和 300 像素)，但我希望它能够动态适应容器。当我尝试添加宽度时:140px；和高度:140px
html - 纯 css 滚动阴影
当内容超过可用宽度时，我需要启用滚动阴影。这是我试图用纯 css(没有 JS)来实现的。我遇到了很多文章，可以使用 css 多背景和背景附件来实现。如果内容是文本类型，则可以使用下面的 jsfilld
regex - 纯 Lua 中功能齐全的正则表达式库
我正在编写一个上古卷轴在线插件，它由一个名为 Havok Script 的轻微修改的 Lua 5.1 引擎支持。 .这个Lua环境不允许访问os , io , package , debug模块或任何
纯 C 语言的 Arduino
我自己尝试过将 Arduino 库编译成他们自己的独立库并链接到 Eclipse 中的一个项目，但在此过程中遇到了一些问题。是否有关于如何启动和运行的体面指南？我一直很难在网上找到一个真正有效的..
javascript - 从本地存储中仅删除选定的列表项 - 纯 JS
我在这里遇到了一些麻烦。我正在尝试使用本地存储创建一个待办事项列表，但我唯一要做的就是将列表项添加到本地存储并删除所有项目从本地存储中删除，但我无法从列表中删除单个 SELECTED 项目。有人可
html - 纯 CSS 响应式文字效果
我的问题很简单。考虑以下 CodePen .是否有可能仅使用 css 就可以获得相同的结果？换句话说，如果不使用 javascrip 如何做到这一点？非常感谢! Nachos are
angularjs - 纯 angularjs 滚动事件监听器
我正在使用没有 jquery 的 angularjs，并尝试创建滚动事件监听器。尝试过这种方法: $rootScope.$watch(function() { return $windo
javascript - 纯 WebGL 虚线
我正在尝试使用纯 webgl 创建虚线。我知道这已经有一个问题，也许我很笨，但我不知道如何让它发挥作用。我理解这个概念，但我不知道如何在着色器中获取沿路径的距离。以前的答案有以下行: varying
javascript - 纯 JavaScript 工具提示
我正在尝试用纯 JavaScript 制作工具提示，显示在 hover .就像 Stack Overflow 中将鼠标悬停在配置文件名称上的一个 div显示。我尝试使用 onmouseover ,
javascript - 纯 JavaScript 添加监听器到加载的新元素
我想要通过 AJAX 将监听器添加到新元素的想法: 例如，现在我有 hello world 我为每个添加了一个监听器，但是当我通过 AJAX 加载新元素时，它没有监听器；我不完全确定问题是什么。
javascript - 各种日期的动态倒计时时钟 - 纯 Javascript
如果我错误地提出了这个问题，或者之前已经有人问过并回答过这个问题，我提前表示歉意。我的搜索发现了类似的基于 JQuery 和/或静态日期的问答，我正在寻找具有动态日期的纯 JavaScript 解决方
multithreading - 纯 Haskell 代码是否需要线程池？
在 Real World Haskell, Chapter 28, Software transactional memory ，开发了一个并发的网络链接检查器。它获取网页中的所有链接，并使用 HEA
javascript - 纯 JavaScript 将图像拖到浏览器
我正在尝试取消 jQuery-fy 一个聪明的 piece of code ，但有点太聪明了。目标是simple 。将图像从桌面拖动到浏览器。在这次 unjQueryfication 过程中，我发
javascript - 纯 Javascript end()
如何重新创建 jQuery end() $('#id') .find('.class') .css('font',f) .end() .find('.seven') .css(b,'red') 我有什

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 使用纯CSS创建三级菜单