Question

出于某种原因，这适用于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;
}

Answer 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;
}

Answer 2

删除位置：relative;你有#menu li {} 不知道为什么它不能在Chrome中运行，但我认为你还不需要它。

Answer 3

@lipelip几乎是对的。

您必须从内部 position: relative标记中删除<li> - 不外部标记。

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

#menu li ul li
{
 position:static;
}

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

Answer 4

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

CSS菜单项未显示在chrome中

4 个答案: