Question

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

Answer 1

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

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

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

1 个答案: