CSSメニューの項目がクロムに​​表示されない

Question

何らかの理由で、これはfirefoxとiexploreでは機能しますが、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

@lipelipがほぼ正しいです。

あなたは<li>だけ内側のタグからposition: relativeを削除する必要があります - ない外のもの。

ことを理解するのは難しい場合は、だけではなく、あなたのCSSにこれを追加することができます。

#menu li ul li 
{ 
position:static; 
} 

それだけで、内側<li>タグに正しいpositionプロパティを設定することで、問題を修正します。

Answer 2

位置を削除します。 #menu li {} にChromeが動作しない理由がわかりませんが、とにかく必要とは思われません。

Answer 3

また、この問題については、floatプロパティを確認してください。私のCSSにはfloat:noneがあります。私は浮動小数点数を削除し、Chromeのポップアップメニューに表示されなかったテキストの問題を解決しました。

Answer 4

私は、これと同様の問題の解決方法を探していました。 OPのサイトは現在Chromeで動作しているようですが、Chromeが特定の要素を処理する方法に問題があることがわかりました。メインメニュー項目とサブメニュー項目の間に1pxのギャップがあり、そのギャップをカーソルと合わせるとサブメニューが非表示になります。解決策は、サブメニューのマージントップを-1pxに設定してそのギャップを取り除くことでした。 OPのケースでは、ギャップはトップではなくサブメニューの左側にあるように見えます。

注：私は<ul>と<li>ではなく<div>を使用しましたが、原則は同じです。

サイト：WeirdCalculator.com

CSSスタイルシートから：

.menuitem { 
    display: inline; 
} 

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