博客首页 > 其他内容

多级下拉菜单的实现方法

2024/8/13 18:27:28

image.png

<style> 
 /* ------------------------------------------------------------------
09. Main Menu CSS
-------------------------------------------------------------------- */
.main-menu ul {
line-height: 1;
}
.main-menu ul > li {
display: inline-block;
position: relative;
line-height: 1;
position: relative;
margin-right: 30px;
}
.main-menu ul > li > a {
text-transform: capitalize;
display: block;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 28px;
color: #000;
padding: 25px 15px;
overflow: hidden;
}
.main-menu ul > li > a.search-btn {
font-size: 22px;
cursor: pointer;
color: #000;
}
.main-menu ul > li.has-dropdown a {
padding-right: 25px;
}
.main-menu ul > li.has-dropdown a::after {
content: "\f107";
font-family: inherit;
font-weight: normal;
clear: both;
position: absolute;
right: 2%;
}
.main-menu ul > li:hover > a {
color: #000;
}
.main-menu ul > li:hover > ul {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.main-menu ul > li > ul {
position: absolute;
top: 100%;
width: 200px;
background-color: #eee;
left: 0;
z-index: 999;
box-shadow: 0 13px 35px -12px rgba(35, 35, 35, 0.15);
visibility: hidden;
opacity: 0;
transform: translateY(40px);
transition: all 0.5s ease-in-out;
padding: 10px 0px;
}
.main-menu ul > li > ul li {
display: block;
margin-right: 0;
}
.main-menu ul > li > ul li > a {
text-align: left;
display: block;
color: #000;
padding: 10px 25px;
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
-ms-transition: all 0.4s ease-out 0s;
-o-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;
}
.main-menu ul > li > ul li > a:hover {
color: var(--tj-heading-secondary);
padding-left: 30px !important;
}
.main-menu ul > li > ul li > a::after {
display: none;
}
.main-menu ul > li > ul li.has-dropdown {
margin-right: 0;
}
.main-menu ul > li > ul li.has-dropdown > a {
padding-right: 25px;
}
.main-menu ul > li > ul li.has-dropdown > a::after {
display: block;
content: "\f105";
font-family: inherit;
font-weight: normal;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
.main-menu ul > li > ul ul {
left: 100%;
top: 0;
margin-left: 5px;
}
.header_searce {
color: #000;
font-size: 22px;
cursor: pointer;
}
/* ----------------------------------
 ------------------------------------ */
 
</style> 
 
  <div class="main-menu">
    <ul>
<li class="has-dropdown"><a href="javascript:void(0)">Products</a>
             <ul class="sub-menu">
<li class="has-dropdown"><a href="/n08/list/25-this-catalogue-name.html" title="test catalogue 1">test catalogue 1</a>
 <ul class="sub-menu">
            
<li class="rd-dropdown-item"><a href="/n08/lists/25-5-测试二级分类1.html" title="测试二级分类1" >测试二级分类1 </a><ul class="sub-menu">
<li class="has-dropdown"><a href="/n08/list/25-this-catalogue-name.html" title="test catalogue 1">test catalogue 1</a>
 <ul class="sub-menu">
            
<li class="rd-dropdown-item"><a href="/n08/lists/25-5-测试二级分类1.html" title="测试二级分类1" >测试二级分类1 </a></li>
<li class="rd-dropdown-item"><a href="/n08/lists/25-6-测试二级分类2.html" title="测试二级分类2" >测试二级分类2 </a></li>
</ul>
            
 
            </li>
                
<li ><a href="/n08/list/31-test-catalogue-1.html" title="test catalogue 1">test catalogue 1</a>
            </li>
                
<li ><a href="/n08/list/32-test-catalogue-1.html" title="test catalogue 1">test catalogue 1</a>
            </li>
                
<li ><a href="/n08/list/33-test-catalogue-1.html" title="test catalogue 1">test catalogue 1</a>
            </li>
                  
                                             
                                           
                                        </ul></li>
<li class="rd-dropdown-item"><a href="/n08/lists/25-6-测试二级分类2.html" title="测试二级分类2" >测试二级分类2 </a></li>
</ul>
            </li>               
       </ul>
      </li>                             
  </ul>               
</div>


  • 谷歌推荐安装SSL电子证书,缺失会标记Not Secure
    排名降低,访客不信任 [介绍]
    网站必备
  • 付费企业邮箱,海外收发稳定,到达率高,退信率低,无限容量 [详情]
    买2年送2年
  • 提供免费海关数据,可通过货物名称,供应商,进口商,标签查询 [介绍]
    完全免费
  • 谷歌关键词排名,搜索引擎营销,优化产品排名,让多产品关键词排名谷歌首页!
    即将上线