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

Question

正常状态:

悬停状态:

伙计们，这可能是小事，但我找不到这种“小事”的来源。正如您从图像链接中看到的那样，我试图在那里创建一个下拉菜单。可悲的是，每当我将触发器悬停在下拉菜单上时，菜单不会下拉，而是水平显示自身并与主菜单集成。

这是我简化的 html(我只使用 home、about 和 benchmark。about 上的下拉触发器)

<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 block}，无论我是将它附加到类、id 还是什么都不附加，例如:

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

如果我不提供其中之一，则“下拉菜单”将不会移动，而是显示悬停状态。 (图 2)。

这是简化的 fiddle :fiddle

请帮忙

Answer 1

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