diff --git a/templates/index.html b/templates/index.html
index e0200f7..99bb401 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -145,19 +145,25 @@
                     <p class="text-xs text-gray-400 mt-1">${n.updated_at}</p>
                     
                     <!-- 操作按钮组 -->
-                    <div class="action-btn absolute right-2 top-1/2 -translate-y-1/2 flex gap-1">
-                        <button onclick="event.stopPropagation(); exportItem('${n.id}')"
-                            class="p-1.5 rounded hover:bg-gray-200 text-gray-500" title="导出">
-                            <i class="ri-download-line"></i>
-                        </button>
-                        <button onclick="event.stopPropagation(); togglePinItem('${n.id}')"
-                            class="p-1.5 rounded hover:bg-gray-200 text-gray-500 ${n.pinned ? 'text-yellow-500' : ''}" title="${n.pinned ? '取消置顶' : '置顶'}">
-                            <i class="${n.pinned ? 'ri-pushpin-fill' : 'ri-pushpin-line'}"></i>
-                        </button>
-                        <button onclick="event.stopPropagation(); deleteItem('${n.id}')"
-                            class="p-1.5 rounded hover:bg-red-100 text-gray-500 hover:text-red-500" title="删除">
-                            <i class="ri-delete-bin-line"></i>
+                    <div class="action-btn absolute right-2 top-1/2 -translate-y-1/2">
+                        <button onclick="event.stopPropagation(); toggleMenu('${n.id}')"
+                            class="p-1.5 rounded hover:bg-gray-200 text-gray-500" title="更多操作">
+                            <i class="ri-more-fill"></i>
                         </button>
+                        <div id="menu-${n.id}" class="hidden absolute right-0 top-full mt-1 bg-white rounded-lg shadow-lg border z-10 min-w-[100px]">
+                            <button onclick="event.stopPropagation(); exportItem('${n.id}'); hideMenu('${n.id}')"
+                                class="w-full px-3 py-2 text-left text-sm text-gray-600 hover:bg-gray-50 flex items-center gap-2">
+                                <i class="ri-download-line"></i> 导出
+                            </button>
+                            <button onclick="event.stopPropagation(); togglePinItem('${n.id}'); hideMenu('${n.id}')"
+                                class="w-full px-3 py-2 text-left text-sm text-gray-600 hover:bg-gray-50 flex items-center gap-2">
+                                <i class="ri-pushpin-line"></i> ${n.pinned ? '取消置顶' : '置顶'}
+                            </button>
+                            <button onclick="event.stopPropagation(); deleteItem('${n.id}'); hideMenu('${n.id}')"
+                                class="w-full px-3 py-2 text-left text-sm text-red-500 hover:bg-red-50 flex items-center gap-2">
+                                <i class="ri-delete-bin-line"></i> 删除
+                            </button>
+                        </div>
                     </div>
                 </div>
             `).join('');
@@ -340,6 +346,28 @@
             URL.revokeObjectURL(url);
         }
 
+        // 显示/隐藏菜单
+        function toggleMenu(id) {
+            const menu = document.getElementById(`menu-${id}`);
+            if (menu) {
+                // 先隐藏其他所有菜单
+                document.querySelectorAll('[id^="menu-"]').forEach(m => {
+                    if (m.id !== `menu-${id}`) m.classList.add('hidden');
+                });
+                menu.classList.toggle('hidden');
+            }
+        }
+
+        function hideMenu(id) {
+            const menu = document.getElementById(`menu-${id}`);
+            if (menu) menu.classList.add('hidden');
+        }
+
+        // 点击其他地方关闭所有菜单
+        document.addEventListener('click', () => {
+            document.querySelectorAll('[id^="menu-"]').forEach(m => m.classList.add('hidden'));
+        });
+
         // 删除当前笔记
         async function deleteCurrentNote() {
             if (!currentNoteId) return;