Почему CSS-меню не работает с Google Chrome

-1

У меня есть страница с новой системой меню CSS, которая не работает с Chrome версии 53.0.2785.101. Меню отлично работает с I.E. 11, Firefox 48.0.2 и Safari на моем iPad. У меня такая же проблема с Chrome, о которой сообщалось на нескольких ПК с Windows 10.Почему CSS-меню не работает с Google Chrome

Вот список соответствующих 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 */ 
    }

Вот некоторые уместна 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>

Проблема держит планку подменю активно. Отобразится строка меню верхней строки. Когда вы наводите верхний элемент меню, элементы подменю отображаются так, как ожидалось. Однако, перемещая мышь в элемент подменю, подменю исчезает. Как остановить исчезновение подменю?

источник

2016-09-08 user3138025

«не работает» ** КАК **? –

Хорошая точка! Отобразится строка меню верхней строки. Когда вы наводите верхний элемент меню, элементы подменю отображаются так, как ожидалось. Когда вы переместите мышь в элемент подменю, подменю исчезнет. – user3138025

обычно, когда это происходит, между панелью меню и меню имеется 1px или больше зазора, что позволяет запускать «mouseout». –

Замените margin-top: 25px; на top: 25px; в вашем #nav ul правило.

источник

2016-09-08 22:10:27

Вот и все! Много благодарностей Халиду! – user3138025

Почему CSS-меню не работает с Google Chrome

ответ

Смежные вопросы