堆栈内存溢出
  繁体   English   中英

使用纯CSS创建菜单的第三级

[英]Create Third level of menu using pure css

 原文  2018-12-21 06:50:02  0   1    html/ css/ css3

问题描述

我正在使用纯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。

1 个解决方案

解决方案1
 1 已采纳  2018-12-21 07:37:53

创建了第三级菜单，希望它有用。 

<!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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用纯 CSS 创建单击多级下拉菜单 使用纯CSS和HTML创建菜单 需要制作3级纯CSS菜单 CSS multilvel菜单问题在第三级 纯 CSS 多级下拉菜单 当鼠标指向该菜单时，第三级CSS下拉菜单不显示 css不能在正确位置显示三级菜单 第三级CSS菜单显示不正确 如何在鼠标悬停时显示/消失将第三级添加到我的CSS菜单 响应式纯CSS菜单
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM