2024/8/13 18:27:28
<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>