1

正常状态： 正常状态

悬停状态： 悬停状态

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

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

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

移除的属性

我的下拉列表有些奇怪.. 它需要在 css 中添加一个 {CSS 块}，无论我将它附加到类、id 还是什么都没有，例如：

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

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

这是简化的小提琴：fiddle

请帮忙

4

2 回答 2

0

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

于 2013-01-14T22:20:17.330 回答
0

尝试将以下内容添加到您的.Historyetc 类中：

clear:right;
于 2013-01-14T22:22:19.127 回答