.dropdown:hover.dropdown-menu{display: block; } 3变化。这是jsfiddle点击预览 将相关类添加到li dropdown-menu absolute类添加top-0。 将菜单内的ul的填充更改为p-8。只是一个小的CSS
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false"> <svg class="h-6 w-6" ...
现在类将取决于下拉值,它只是组件的一个属性,可以通过如下所示的单击事件进行更改: export default { name: 'TheNavBar', data() { return { dropdown: false, } }, } <div> <button id="user-menu" class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-w...
<style>.dropdown:hover .dropdown-menu{display:block;}</style><divclass="dropdown relative inline-block"><buttonclass="px-3 py-2 rounded border border-gray inline-flex items-center text-gray-800"><spanclass="mr-1">下拉按钮</span><svgclass="fill-current h-4 w-4"xmlns="http://www....
• open on hover or click on menu button • menu button can be a link (will be followed on 2nd click as first one opens or closes dropdown) • close on moving away from button / dropdown • close on click outside dropdown PS: Styling is a work in progress. I could not fi...
使用transition,opacity, 和scale等类,创建平滑的菜单过渡效果。html <div id="dropdown-menu" class="transition-opacity transition-transform duration-200"> <!-- 下拉菜单内容 --> </div> 按钮点击缩放 使用hover:scale-105和transition-transform类,使按钮在交互时提供缩放反馈。html <button class="transition...
<style> @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .dropdown-menu { display: none; animation: slideDown 0.5s ease-out; } .dropdown:hover .dropdown-menu { display: block; } </style> ...
Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><hr class="dropdown-divider"></li> ...
data-testid="help-menu"> <div title="Help Menu Items" class="z-10 m-1 rounded-md shadow-lg bg-[var(--pd-dropdown-bg)] ring-2 ring-[var(--pd-dropdown-ring)] hover:ring-[var(--pd-dropdown-hover-ring)] divide-y divide-[var(--pd-dropdown-divider)] focus:outline-none"> cl...
<t-dropdowntext="Menu"><divclass="py-1 rounded-md shadow-xs"><ahref="#"class="block px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus:bg-gray-100"role="menuitem">Your Profile</a><ahref="#"class="block ...