个人中心
gpt4 book ai didi

html - 为什么 CSS 菜单不适用于谷歌浏览器

转载 作者：行者123 更新时间：2023-11-28 17:26:50 24 4
gpt4 key购买 nike

我有一个包含新 CSS 菜单系统的页面，该系统不适用于 Chrome 版本 53.0.2785.101。该菜单适用于 I.E. 11、我的 iPad 上的 Firefox 48.0.2 和 Safari。我在多台 Windows 10 PC 上报告了与 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>

问题在于保持子菜单栏处于事件状态。显示顶行菜单栏。当您将鼠标悬停在顶部菜单项上时，子菜单项将按预期显示。但是，当您将鼠标移动到子菜单项时，子菜单就会消失。如何阻止子菜单消失？

最佳答案

在 #nav ul 规则中将 margin-top: 25px; 替换为 top: 25px;。

关于html - 为什么 CSS 菜单不适用于谷歌浏览器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39400776/

24 4 0
文章推荐： html - 高度相同但内容长度不同的列和底部的按钮
文章推荐： css - 在元素和边框之间应用间距
文章推荐： javascript - Controller 在离开时不保留范围
文章推荐： CSS :hover Selector not working as expected with gifs
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com