如何修复下拉菜单

Question

我正在训练我的 CSS 以传递给 JS，但我很担心，因为我在做下拉菜单时遇到了一些问题。

我已经得到了这个概念，但是当我把它付诸实践时，它有点麻烦，并且移动了nav 。

 header { overflow: auto; } header img { float: left; margin-left: 300px; margin-top: 10px; } header img:hover { opacity: 0.8; } nav { float: right; margin-right: 250px; margin-top: 40px; } nav ul { padding: 0px; } nav ul li { display: inline; margin-right: 50px; border-right: 1px solid black; } nav ul li:last-child { border-right: none; } nav ul li a { color: black; text-decoration: none; font-weight: bold; font-family: roboto; margin-right: 50px } nav ul li a:hover {} nav li ul { display: none; } nav li:hover ul { display: block; position: relative; } nav li:hover li { float: none; }

 <header> <img src="logo.png"> <nav> <ul> <li> <a href="#">Menu 01</a> <ul> <li><a href="#">Submenu 01</a></li> </ul> </li> <li><a href="#">Menu 02</a></li> <li><a href="#">Menu 03</a></li> <li><a href="#">Menu 04</a></li> </ul> </nav> </header>

我发送带有img标签的代码只是为了明确这些东西的位置。 我也在学习这些东西，所以在其他显示器上可能会很糟糕。

Answer 1

 nav li ul{ display: none; position:absolute; } nav li:hover ul{ display: block; }

就这样