다음과 같은 드롭다운 메뉴가 있습니다.
으아악 으아악 그러나 두 번째 레벨 메뉴는 작동하지 않습니다("Run Code Snippet"을 눌러 확인하십시오). 첫 번째 레벨의 오른쪽에 표시되어야 하며, 각 레벨의 너비는 탄력적이어야 합니다(콘텐츠에 따라 자동으로 증가 및 감소). 또한 루트 버튼의 너비는 첫 번째 수준의 너비에 바인딩되어서는 안 됩니다. 이상적으로 모든 레벨은 공통된 스타일을 가져야 하지만 수십 개의 레벨이 없기 때문에 중요하지 않습니다. 모든 코드를 다시 작성하지 않고 해결할 수 있는 방법이 있나요?
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
다음을 수행할 수 있습니다:
에서.dropdown-content中删除overflow: auto;，以便溢出的子级别可见。在.dropdown:hover .dropdown-content行添加>选择器，以便直接子项将在悬停时显示。最后一件事是添加子级别样式以将其显示在右上角.dropdown-content .dropdown-content { left: 100%;顶部：0； }