CSS 菜单项未在 chrome 中显示答案

【问题标题】：CSS menu items not showing in chromeCSS 菜单项未在 chrome 中显示
【发布时间】：2011-01-27 15:12:13
【问题描述】：

由于某种原因，这适用于 firefox 和 iexplore，但不适用于 chrome。它应该隐藏子菜单，直到鼠标滑过它 - 在 chrome 中，鼠标悬停显然会随着颜色的变化等而工作，但菜单不会弹出！你能提供的任何帮助都会很棒！谢谢！！

#menu, #menu ul
{
margin:0px;
 padding:0px;
 list-style:none;
 list-style-position:outside;
 position:relative;
 line-height:2em; /* this would mean the element is double the height of the font */
}

/* set up colours, borders and element padding */
#menu a:link, #menu a:active, #menu a:visited
{
 display:block;
 padding:0px 5px; /* shorthand padding - this means top and bottom padding is 0, left and right are 5px */
 color: #000000; /* link text colour */
 text-decoration:none;
 background-color:#F90; /* specifies background colour of links */
 font-weight:bold;
 color:#FFC;
 /* border stuff */
 border:1px solid #F90; /* shorthand, border is 1px wide, solid and coloured */


}

/* set up hover colour for links */
#menu a:hover
{ 
 background-color:#FC6;
 color:#900;
 border:1px solid #F60;
}

/* position menu elements horizontally */
#menu li
{
 width:7em;
 position:relative;
}

/* position and hide nested lists (width required to make menu display vertically) and "top" value needs same measurement as defined for #menu */
#menu ul
{
 position:absolute;
 width:7em;
 left:7em; /* same value as width - no bigger otherwise gap will appear and menu will not work */
 top:0em; /* line up with parent list item */
 display:none;
}

/* set width of links to 12em */
#menu li ul a
{
 width:7em;
 float:left;
}

/* display information for sub-menus */
#menu ul ul
{
 top:auto;
}

#menu li ul ul
{
 left:7em;
 margin: 0px 0px 0px 10px;  /*shorthand margin command */
}

/* display when rolled over - also number of sub-menus to display - if wanted to use more submenus, would need more UL's  (ie ul ul ul instead of ul) */
#menu li:hover ul ul
{
 display:none;
}

#menu li:hover ul, #menu li li:hover ul
{
 display:block;
}

【问题讨论】：

在可能的情况下尝试使用直接后代选择器 (>)，以使事情更清晰一些。只是一个想法。
您能否在JS Fiddle 或JS Bin 发布一个重现此行为的演示？
www.fruitfulcreations.co.uk

标签： css firefox google-chrome

【解决方案1】：

我在寻找类似问题的解决方案时遇到了这个问题。 OP 的网站现在似乎可以在 Chrome 中运行，但我发现问题在于 Chrome 处理某些元素的方式。主菜单项和子菜单项之间有 1px 的间隙，用光标点击该间隙将隐藏子菜单。解决方案是将子菜单上的 margin-top 设置为 -1px 以消除该间隙。在 OP 的情况下，似乎间隙应该在子菜单的左侧而不是顶部。

注意：我的与 OP 的不同之处在于我使用了<div> 而不是<ul> 和<li>，但原理是一样的。

网站：WeirdCalculator.com

来自 CSS 样式表：

.menuitem {
    display: inline;
}

.menuitem:hover .show {
    margin-top: -1px;
}

【讨论】：

【解决方案2】：

@lipelip 几乎是对的。

您必须从 inner <li> 标签中删除 position: relative - 而不是 外部标签。

如果这很难理解，您可以将其添加到您的 CSS 中：

#menu li ul li
{
 position:static;
}

它通过仅在内部 <li> 标记上设置正确的 position 属性来解决此问题。

【讨论】：

谢谢！我已经添加了它，它工作得很好！你能解释一下我做错了什么，以便我能从中吸取教训吗？谢谢:)
这是不久前的事情，所以我不确定。我又看了一遍，原因似乎是在父元素上使用position: relative 和在#menu li ul a 上使用float: left 之间的一些奇怪的交互。这样做的必然结果是，您应该确保只给出绝对需要 position: relative 的元素。

【解决方案3】：

移除位置：relative;你在#menu li {} 不知道为什么它不能在 Chrome 中工作，但我认为你不需要它。

【讨论】：

它是必需的，它确保列表项相对于其父项定位 - 如果它不存在，当鼠标悬停时菜单项将出现在其他地方 - 不过还是谢谢！ :)

【解决方案4】：

另外请检查浮动属性是否存在此问题。我的 CSS 中有一个 float:none，我删除了浮动，它解决了我的文本问题，即 Chrome 的弹出菜单中没有出现文本。

【讨论】：