user3138025 user3138025 - 2 months ago 25
CSS Question

Why is a CSS Menu not working with Google Chrome

I have a page with a new CSS menu system that is not working with Chrome version 53.0.2785.101. The menu works fine with I.E. 11, Firefox 48.0.2 and Safari on my iPad. I have the same problem with Chrome reported from multiple Windows 10 PC's.

Here's a listing of the pertinent 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 */
}


Here's some pertinent 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>


The problem is keeping the sub-menu bar active. The top line menu bar displays. When you hover over a top menu item the sub-menu items display as expected. However, as you move the mouse to the sub-menu item, the sub-menu disappears. How do I stop the sub-menu from disappearing?

Answer

Replace margin-top: 25px; with top: 25px; in your #nav ul rule.