时间戳

首页 > 解决方案 > chrome下拉菜单兼容性问题

html - chrome下拉菜单兼容性问题

问题描述

它适用于除 chrome 之外的所有浏览器，而使用 Dreamweaver 进行实时预览似乎适用于所有浏览器，但将其上传到服务器时，问题仅出现在 chrome 中。试图更改内联/块标签。显示：无/块标记一切，仍然无法解决它。它是与 CSS 相关的东西还是 javascript 或什么？下拉菜单在除 Chrome 之外的所有浏览器上都能正常工作

html, body {
    margin: 0px;
    padding: 0px;
    width: 100%;
}

ul > li{
    list-style-type: none;
    display: inline-block;
}


.grid-container {
    display:grid;
}

a {
    display: block;
}

#upper-bar {
    background-color: #00A2CB;
    color: white;
    font-weight: bold;
    font-family: sans-serif;
    padding-left: 50px;
    padding-right: 50px;
}

div[id="upper-bar"] a {
    color: white;
    padding: 5px;
}

#lower-bar {
    font-weight: bold;
    font-family: sans-serif;
    padding-left: 70px;
    padding-right: 70px;
}

div[id="lower-bar"] a {
    color: black;
    padding: 5px;
}

.align-left {
    float:left;
}

.align-right {
    float: right;
}
li a, .dropbtn {
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #00A2CB;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #008FB3;}

.dropdown:hover .dropdown-content {
  display: block;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
<title>Test page</title>
</head>

<body>
    <header class="grid-container">
        <div id="upper-bar">
            <div class="align-left">
                <ul>
                    <li>|</li>
                    <li><a href="#" >ABOUT US</a></li>
                    <li>|</li>
                    <li><a href="#" >OUR SERVICES</a></li>
                    <li>|</li>
                    <li class="dropdown">
                        <a href="javascript:void(0)" class="dropbtn">HELP</a>
                        <div class="dropdown-content">
                            <a href="#">Link 1</a>
                            <a href="#">Link 2</a>
                            <a href="#">Link 3</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div id="lower-bar">
            <div class="align-left">
                <ul>
                    <li><a href="#" ><img src="#" rel="#" alt="#"></a></li>
                    <li><a href="#" >Home</a></li>
                    <li><a href="#" >Individuals</a></li>
                    <li><a href="#" >doctors</a></li>
                    <li><a href="#" >Companies</a></li>
                </ul>
            </div>
            <div class="align-right">
                <ul>
                    <li><a href="#" >Login</a></li>
                    <li><a href="#" >Signup</a></li>
                </ul>
            </div>
        </div>    
    </header>
    <main>
    </main>
    <footer>
        
    </footer>
    
</body>
</html>

标签： htmlcssgoogle-chromedrop-down-menu

解决方案

推荐阅读