Html 下拉菜单不会下降，而是移到一边

正常状态：

悬停状态：

伙计们，这可能很小，但我找不到“小”的来源。从图像链接中可以看到，我试图在那里创建一个下拉菜单。不幸的是，每次我将触发器悬停在下拉菜单上，而不是下拉，菜单就会水平显示，并与主菜单集成

这是我的简化html，我只使用home、about和benchmark。关于的下拉触发器

<div class="header">
    <div id="navbar">
         <ul id="nav" >
         <li class="rhombus"><a class="Home"        href="#"><span><p>Home</p></span></a></li>
         <li class="rhombus"><a class="About"   href="#"><span><p>About</p></span></a>
             <ul>
             <li><a class="History" href="#"><span><p>History</p></span></a></li>
             <li><a class="Board"   href="#"><span><p>Board</p></span></a></li>
             <li><a class="Vision"  href="#"><span><p>Vision &amp; Mission</p></span></a></li>
             </ul>
         </li>
        <li class="rhombus"><a class="Benchmark"                    href="#"><span><p>Benchmark &amp; Market</p></span></a></li>
         </ul>
 </div></div>

是因为我使用float:left作为

---

请帮助

不要为每个子菜单创建类。是一个类似的帖子，会得到你想要的结果。然后可以将每个块的样式设置为倾斜、颜色等。

尝试将以下内容添加到.History等类中：

clear:right;

---

fiddle似乎可以在没有未使用的类/id声明（如.test{}）的情况下工作，但问题仍然是，它保持水平扩展，而不是删除项。

.unusedclass{CSS}
.unusedid{CSS}
{}

clear:right;