diff --git a/frontend/app/element/dropdown.less b/frontend/app/element/dropdown.less
index 5d67ce8b..1cdc91a9 100644
--- a/frontend/app/element/dropdown.less
+++ b/frontend/app/element/dropdown.less
@@ -27,7 +27,8 @@
         letter-spacing: -0.12px;
         width: 100%;
 
-        &:hover {
+        &:hover,
+        &.active {
             background-color: var(--accent-color);
         }
 
diff --git a/frontend/app/element/dropdown.tsx b/frontend/app/element/dropdown.tsx
index 545a1323..a1ef9576 100644
--- a/frontend/app/element/dropdown.tsx
+++ b/frontend/app/element/dropdown.tsx
@@ -11,6 +11,7 @@ const SubMenu = memo(
         parentKey,
         subMenuPosition,
         visibleSubMenus,
+        hoveredItems,
         handleMouseEnterItem,
         subMenuRefs,
     }: {
@@ -18,9 +19,11 @@ const SubMenu = memo(
         parentKey: string;
         subMenuPosition: any;
         visibleSubMenus: any;
+        hoveredItems: string[];
         handleMouseEnterItem: any;
         subMenuRefs: any;
     }) => {
+        // Ensure a ref exists for each submenu
         subItems.forEach((_, idx) => {
             const newKey = `${parentKey}-${idx}`;
             if (!subMenuRefs.current[newKey]) {
@@ -41,11 +44,13 @@ const SubMenu = memo(
                 }}
             >
                 {subItems.map((item, idx) => {
-                    const newKey = `${parentKey}-${idx}`;
+                    const newKey = `${parentKey}-${idx}`; // Full hierarchical key
+                    const isActive = hoveredItems.includes(newKey); // Check if this item is hovered or in the hierarchy
+
                     return (
                         <div
                             key={newKey}
-                            className="dropdown-item"
+                            className={clsx("dropdown-item", { active: isActive })} // Add "active" class if the item or ancestor is hovered
                             onMouseEnter={(event) => handleMouseEnterItem(event, parentKey, idx, item)}
                         >
                             {item.label}
@@ -56,6 +61,7 @@ const SubMenu = memo(
                                     parentKey={newKey}
                                     subMenuPosition={subMenuPosition}
                                     visibleSubMenus={visibleSubMenus}
+                                    hoveredItems={hoveredItems} // Pass hoveredItems to submenus
                                     handleMouseEnterItem={handleMouseEnterItem}
                                     subMenuRefs={subMenuRefs}
                                 />
@@ -88,6 +94,7 @@ const Dropdown = memo(
         className?: string;
     }) => {
         const [visibleSubMenus, setVisibleSubMenus] = useState<{ [key: string]: any }>({});
+        const [hoveredItems, setHoveredItems] = useState<string[]>([]); // Track hovered items and ancestors
         const [subMenuPosition, setSubMenuPosition] = useState<{
             [key: string]: { top: number; left: number; label: string };
         }>({});
@@ -107,6 +114,8 @@ const Dropdown = memo(
             }
         });
 
+        console.log("hoveredItems", hoveredItems);
+
         useLayoutEffect(() => {
             if (anchorRef.current && dropdownRef.current) {
                 const anchorRect = anchorRef.current.getBoundingClientRect();
@@ -215,6 +224,14 @@ const Dropdown = memo(
                 return updatedState;
             });
 
+            // Update the hovered items state (including ancestors)
+            const newHoveredItems = key.split("-").reduce((acc, part, idx) => {
+                if (idx === 0) return [part];
+                return [...acc, `${acc[idx - 1]}-${part}`];
+            }, [] as string[]);
+
+            setHoveredItems(newHoveredItems);
+
             const itemRect = event.currentTarget.getBoundingClientRect();
             handleSubMenuPosition(key, itemRect, dropdownRef, item.label);
         };
@@ -227,10 +244,12 @@ const Dropdown = memo(
             >
                 {items.map((item, index) => {
                     const key = `${index}`;
+                    const isActive = hoveredItems.includes(key); // Check if the current item is hovered or in the hierarchy
+
                     return (
                         <div
                             key={key}
-                            className="dropdown-item"
+                            className={clsx("dropdown-item", { active: isActive })} // Highlight hovered items and ancestors
                             onMouseEnter={(event) => handleMouseEnterItem(event, null, index, item)}
                         >
                             {item.label}
@@ -241,6 +260,7 @@ const Dropdown = memo(
                                     parentKey={key}
                                     subMenuPosition={subMenuPosition}
                                     visibleSubMenus={visibleSubMenus}
+                                    hoveredItems={hoveredItems} // Pass hoveredItems to submenus
                                     handleMouseEnterItem={handleMouseEnterItem}
                                     subMenuRefs={subMenuRefs}
                                 />