下拉菜单不会丢弃，它会移动

Question

正常状态：

悬停状态：

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

这是我简化的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>

这是简化的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块}，我是否将其附加带班，IDS，或什么都没有，例如：

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

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

这里是简化的小提琴：fiddle

请帮助

Answer 1

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

Answer 2

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

clear:right;