Warum funktioniert ein CSS-Menü nicht mit Google Chrome?

Question

Ich habe eine Seite mit einem neuen CSS-Menüsystem, das nicht mit der Chrome-Version 53.0.2785.101 funktioniert. Die Speisekarte funktioniert gut mit I.E. 11, Firefox 48.0.2 und Safari auf meinem iPad. Ich habe das gleiche Problem mit Chrome von mehreren Windows 10 PCs gemeldet.

Hier ist eine Auflistung der zugehörigen CSS:

@charset "UTF-8"; 
/* CSS Document */ 

#nav { 
    width:100%; /* Needed for menu to float and center. Explicit PX doesn't work */ 
    margin-left: -50px; /* To accommodate the difference between page width and menu */ 
    list-style-type:none; /* no underscores, etc. */ 
    text-align:center; /* needed for menu to float and center. */ 
    position:absolute; /* used to render menu bar fixed on top and not scroll up ALSO ALLOWS MENUS TO STAY ON TOP OF SLIDESHOW*/ 
    top: 0; /* used to render menu bar on top */ 
    z-index: 2000; /* use z-index to render menu bar on top of everything, even the slideshow */ 
    display:inline-block; 
    } 

#nav li { 
    display:inline-block; /* used to wrap text */ 
    position:relative; /* to enable items to "drop down" */ 
    float:none; /* needed for menu to float with risized window */ 
    background-color: #BDB76B; /* menu background color */ 
    font-family: Arial, Helvetica, sans-serif; 
    font-size:14px; 
    } 

#nav li:hover { /* highlights current hovered list item when hovering over the parent menu */ 
    background-color:#BDB76B; 
    font-weight:500; 
} 

#nav li a { 
    display:inline-block; /* used to wrap text */ 
    margin:5px 0; /*space between menu elements Top, Right, Bottom, Left */ 
    text-decoration:none; 
    width:150px; /* this is the standard width of the menu items */ 
    line-height:15px; /* this is the text height of the menu items */ 
    color:#000000; /* list item font color 000=black, FFF=white*/ 
    } 

#nav li a:hover { /* highlights hovered item of the parent menu */ 
    background-color:#BDB76B; 
    font-weight:500; 
    color:blue; 
    font-size:18px; 
} 

/*--- Sublist Styles ---*/ 
#nav li li a { /* font size for sub menu items (children of parent) */ 
    font-size:90%; 
    background-color: #BDB76B; /* menu background color for submenus */ 
    width:220px; /*make the list of children wider to accommodate the larger font on hover */ 
} 

#nav li li a:hover { /* highlights current hovered list when hovering over sub menues */ 
    background-color:#BDB76B; 
    font-weight:500; 
    color:blue; 
    font-size:120%; 
    width:220px; /* This is the hovered width of the menu items */ 
} 

#nav ul { 
    position:absolute; 
    margin-top:25px; /* distance between first child and parent so that child doesn't overlap parent */ 
    padding:5px; /* provides a gap between parent and child */ 
    left:0; 
    display:none; /* hides sublists (children of parent) */ 
    } 

#nav li:hover ul ul { 
    display:none; /* hides sub-sublists (children of children) */ 
} 

#nav li:hover ul ul ul { 
    display:none; /* hides sub-sub-sublists (children of children of children) */ 
} 

#nav li:hover ul { 
    display:inline-block; /* shows sublist on hover (children of parent) */ 
          /* Do not place a margin-left tag here 
          since the list should display below the parent */ 
    /* margin-top:35px; */ 
} 

#nav li li:hover ul { 
    display:inline-block; /* shows sub-sublist on hover (children of children) */ 
    margin-left:220px; /* this should be the same width as the parent list item */ 
          /* this will place the hovered list to the right of the child list) */ 
    margin-top:-35px;  /* aligns top of sub menu with top of list item */ 
    } 

#nav li li li:hover ul { 
    display:inline-block; /* shows sub-sublist on hover (children of children of children) */ 
    margin-left:220px; /* this should be the same width as the parent list item */ 
          /* this will place the hovered list to the right of the child of child list) */ 
    margin-top:-35px;  /* aligns top of sub menu with top of list item */ 
    } 

Hier einige relevante HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Saint Susanna Parish Contact Us Page SHTML</title> 
    <link href="CSS/SaintSusannaOrg.css" rel="stylesheet" type="text/css" /> 
    <style type="text/css"> 
    body { 
     background-color: #EEE8AA; 
     } 
    </style> 
</head> 
<body> 
<div> 
    <ul id="nav"> 
     <li><a href="#">Faith Formation</a> 
      <ul> 
      <li><a href="adult_faith_formation.shtml">Adult Faith Formation</a></li>  
      </ul> 
     </li> 
     <li><a href="#">Parish Groups</a> 
      <ul> 
      <li><a href="Attachments/ChurchGroupsListing.pdf" target="_blank">Listing</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 
<div> 
<br><br><br> 
    Some text in the body. 
</div> 
</body> 
</html> 

Das Problem der Untermenüleiste aktiv hält. Die oberste Menüleiste wird angezeigt. Wenn Sie den Mauszeiger über einen oberen Menüeintrag bewegen, werden die Untermenüpunkte wie erwartet angezeigt. Wenn Sie die Maus jedoch zum Untermenüelement bewegen, wird das Untermenü ausgeblendet. Wie kann ich verhindern, dass das Untermenü verschwindet?

Answer 1

Ersetzen Sie margin-top: 25px; durch top: 25px; in Ihrer #nav ul Regel.