fix(hexo主题子菜单闪烁问题)

This commit is contained in:
LooseLi
2025-03-24 15:03:02 +08:00
parent d81d6e79d7
commit 2ac4f9f931

View File

@@ -29,10 +29,12 @@ export const MenuItemDrop = ({ link }) => {
{hasSubMenu && (
<>
<div className='cursor-pointer menu-link pl-2 pr-4 no-underline tracking-widest pb-1'>
<div className='cursor-pointer menu-link pl-2 pr-4 no-underline tracking-widest pb-1 relative'>
{link?.icon && <i className={link?.icon} />} {link?.name}
<i
className={`px-2 fa fa-angle-down duration-300 ${show ? 'rotate-180' : 'rotate-0'}`}></i>
{/* 主菜单下方的安全区域 */}
<div className='absolute w-full h-3 -bottom-1 left-0 bg-transparent z-30'></div>
</div>
</>
)}
@@ -41,7 +43,7 @@ export const MenuItemDrop = ({ link }) => {
{hasSubMenu && (
<ul
style={{ backdropFilter: 'blur(3px)' }}
className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md text-black dark:text-white bg-white dark:bg-black transition-all duration-300 z-20 absolute block `}>
className={`${show ? 'visible opacity-100 top-12 pointer-events-auto' : 'invisible opacity-0 top-20 pointer-events-none'} drop-shadow-md overflow-hidden rounded-md text-black dark:text-white bg-white dark:bg-black transition-all duration-300 z-20 absolute block `}>
{link.subMenus.map((sLink, index) => {
return (
<li