下拉菜单不会丢弃，它会移动(Dropdown Menu Won't Drop, It Moves Aside Instead)

正常状态：

悬停状态：

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

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

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

这是简化的CSS

/* centering container */ .outerwrap {width:100%; height:100%; margin:0px; padding:0px; display:table; position:absolute; top:0px; left:0px;} .innerwrap {margin:0px; padding:0px; display:table-cell; vertical-align:middle;} /* header */ .header {height:27.82738095238095%; width:100%; position:absolute; top:0%; left:0%; z-index:100;} /* navigation bar */ #navbar {position:relative; top:60.2%; left:5%; z-index:100;} #nav, #nav ul{margin:0px; padding:0px; list-style-type:none; list-style-position:outside;} #nav a:link, #nav a:active, #nav a:visited{height:31px; display:block; text-decoration:none; background:yellow} #nav a:hover{background:red;} #nav li ul {position:relative; display:none;} #nav li ul li a:link, #nav li ul li a:visited {height:31px; background:green;} #nav li ul li a:hover {background:blue} .History{width:50px;float:left;} .Board{width:50px;float:left;} .Vision{width:50px;float:left;} li.rhombus { position: relative; transform: skew(-35deg); -webkit-transform: skew(-35deg); -moz-transform: skew(-35deg); -ms-transform: skew(-35deg); -o-transform: skew(-35deg); width:96.1%; } a.Home {width:50px;float:left;} a.About {width:50px;float:left;} a.Benchmark {width:50px;float:left;} li.rhombus span { transform: skew(35deg); -webkit-transform: skew(35deg); -moz-transform: skew(35deg); -ms-transform: skew(35deg); -o-transform: skew(35deg); display:block; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{display:none;} #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{display:block;} .test{}

是因为我在下拉菜单中使用“float：left”作为我<a></a>的属性之一？如果我删除该属性，这将发生什么：

我的下拉列表有一些奇怪的东西..它需要在CSS中有一个{CSS block}，无论我是用class，id还是什么都没有，例如：

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

如果我不提供其中一个，那么'下拉'将不会移动而是显示悬停状态。（图2）。

这里是简化的小提琴：小提琴

请帮忙

Normal State:

Hover State:

Guys, this is maybe petty but I couldn't find the source of this 'pettiness'. As you can see from the image link, I tried to create a dropdown menu there. Sadly, evertime I hover the trigger to the dropdown menu, instead of dropping down, the menu is displaying itself horizontally and getting integrated with the main menu.

this is my simplified html (I only utilize home, about, and benchmark. drop-down trigger on about)

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

and this is the simplified CSS

/* centering container */ .outerwrap {width:100%; height:100%; margin:0px; padding:0px; display:table; position:absolute; top:0px; left:0px;} .innerwrap {margin:0px; padding:0px; display:table-cell; vertical-align:middle;} /* header */ .header {height:27.82738095238095%; width:100%; position:absolute; top:0%; left:0%; z-index:100;} /* navigation bar */ #navbar {position:relative; top:60.2%; left:5%; z-index:100;} #nav, #nav ul{margin:0px; padding:0px; list-style-type:none; list-style-position:outside;} #nav a:link, #nav a:active, #nav a:visited{height:31px; display:block; text-decoration:none; background:yellow} #nav a:hover{background:red;} #nav li ul {position:relative; display:none;} #nav li ul li a:link, #nav li ul li a:visited {height:31px; background:green;} #nav li ul li a:hover {background:blue} .History{width:50px;float:left;} .Board{width:50px;float:left;} .Vision{width:50px;float:left;} li.rhombus { position: relative; transform: skew(-35deg); -webkit-transform: skew(-35deg); -moz-transform: skew(-35deg); -ms-transform: skew(-35deg); -o-transform: skew(-35deg); width:96.1%; } a.Home {width:50px;float:left;} a.About {width:50px;float:left;} a.Benchmark {width:50px;float:left;} li.rhombus span { transform: skew(35deg); -webkit-transform: skew(35deg); -moz-transform: skew(35deg); -ms-transform: skew(35deg); -o-transform: skew(35deg); display:block; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{display:none;} #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{display:block;} .test{}

Is it because I use "float:left" as one of properties of my <a></a> in my dropdown menu? If I remove that property, this what will happen:

and there's something strange about my dropdown.. it needs an {CSS block} in the css, whether I attach it with class, ids, or with nothing at all such as:

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

if I don't provide one of those, then the 'dropdown' won't move and instead showing the hover state. (image 2).

here is the simplifed fiddle: fiddle

please help