这是我的第一篇文章。当我将鼠标悬停在导航栏中时，我遇到了背景颜色问题。它在mozilla中运行良好但由于某些原因在chrome中，只有部分菜单项在悬停时发生变化。任何帮助将不胜感激。
<?php
$link = mysql_connect ("localhost", "pouredin_web", "Asdfgh.12345") or die ('I cannot connect to the database.');
mysql_select_db("pouredin_web", $link);
//$Sql = "select * from news where status = 1 and web_id = ".$web_id." and pdate_in < NOW() and pdate_out > NOW() and ntype = 'Evento' order by nlevel, pdate_in desc limit 0,3 ";
$Sql = "select * from contents";
$data = array();
$result = mysql_query($Sql,$link);
while($row = mysql_fetch_array($result))
{
$data[$row["name"]] = $row["ntext"];
//echo $row["name"].'<br>';
}
mysql_free_result($result);
?>
<!DOCTYPE HTML>
<!--
Landed by HTML5 UP
html5up.net | @ajlkn
-->
<html>
<head>
<title>EPDM Polmers | EPDM Rubber Granules | Poured-In-Place Rubber</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="./css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript" src="./js/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
<link rel="stylesheet" href="./js/BackToTop.jquery.css" type="text/css" />
</head>
<body>
<div id="page-wrapper">
<!-- Header -->
<div class="keywords"><?php echo $data["topText"] ?></div><!--end keywords-->
<header id="header">
<div class="container">
<div id="logo"><a href="index.php"><img src="images/epdm-logo.png" class="image-full" ></a></div>
<div id="chris"><a href="index.php"><img src="images/ISO9001.jpg" class="image-full" ></a></div>
<nav id="nav">
<ul>
<li><a href="index.php"><span>HOME</span></a><li>
<li><a href="aboutus.php"><span>OUR COMPANY</span></a></li>
<li><a href="products.php"><span>PRODUCTS</span></a>
<ul>
<li><a href="ecolastic-epdm-granules.php"<span>EPDM Rubber Granules</span></a></li>
<li><a href="airethane-polyurethane-products.php">Polyurethane Binder</a></li>
</ul>
<li><a href="ecolastic-epdm-granules.php"><span>EPDM RUBBER</span></a>
<li><a href="resources.php"><span>DATA SHEETS</span></a></li>
</ul>
</nav>
<div class="clear"></div>
</div><!--end container-->
</header>
CSS FILE
/* Header */
#page-wrapper {
padding-top: 0em;
}
#header {
}
#header #logo{ display:block; float:left; max-width:100px; margin: 25px auto;
}
#chris { display:block; float:right; max-width:100px; margin: 25px auto;
}
#header nav { margin-top:3.5em; display:block; float:right; background:url(../../images/nav-tail.gif) repeat-x top;
}
#header nav ul {
margin: 0; padding:0;
}
#header nav ul li {
display: block;
float:left;
margin: 0; padding:0;
background:url(../../images/nav-border.gif) right center no-repeat;
}
#header nav ul li:last-child { background:none;}
#header nav ul li a{ padding:0.9em 2.85em;}
#header nav ul li a, #header nav ul li span {
border: 0;
color: inherit;
display: block;
height: inherit;
line-height: inherit;
outline: 0;
}
#header nav ul li.current { color: #FFF;
background: rgb(76,76,76);
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(43,43,43,1) 54%, rgba(19,19,19,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(54%,rgba(43,43,43,1)), color-stop(100%,rgba(19,19,19,1)));
background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(43,43,43,1) 54%,rgba(19,19,19,1) 100%);
background: -o-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(43,43,43,1) 54%,rgba(19,19,19,1) 100%);
background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(43,43,43,1) 54%,rgba(19,19,19,1) 100%);
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(43,43,43,1) 54%,rgba(19,19,19,1) 100%);}
#nav ul li a:hover {background: #333;}
#header nav ul li:hover { background:#333; }
#header nav ul li:hover a{color:#FFF !important;}
#header nav ul li a:not(.button):before, #header nav ul li span:not(.button):before {
margin-right: 0.5em;
}
#header nav ul li.active > a, #header nav ul li.active > span {
color: #fff; background:#333;
}
#header nav ul li > ul {
display: none;
}
答案 0 :(得分：1)
首先尝试编辑一些代码进行格式化。在你的代码中遇到了这个问题：
...
<ul>
<li><a href="index.php"><span>HOME</span></a>
<li>
<li><a href="aboutus.php"><span>OUR COMPANY</span></a></li>
<li><a href="products.php"><span>PRODUCTS</span></a>
<ul>
<li><a href="ecolastic-epdm-granules.php" <span>EPDM Rubber Granules</span></a></li>
<li><a href="airethane-polyurethane-products.php">Polyurethane Binder</a></li>
</ul>
<li><a href="ecolastic-epdm-granules.php"><span>EPDM RUBBER</span></a>
<li><a href="resources.php"><span>DATA SHEETS</span></a></li>
</ul>
...
马上，你错过了很多结束标签。
需要使用<li>标记关闭</li>代码。对于有效的HTML。有些浏览器可以渲染这个并允许你的css运行（IDK如何），也许chrome不是。那是猜猜任何......
如果你能解决其中的一些问题并且仍然存在问题。让我们知道，我们很乐意提供帮助。
以下是上述的固定片段。但是，你的html的其余部分可能仍然不是有效的HTML。
<ul>
<li><a href="index.php"><span>HOME</span></a></li>
<li><a href="aboutus.php"><span>OUR COMPANY</span></a></li>
<li><a href="products.php"><span>PRODUCTS</span></a> </li>
<ul>
<li><a href="ecolastic-epdm-granules.php" <span>EPDM Rubber Granules</span></a></li>
<li><a href="airethane-polyurethane-products.php">Polyurethane Binder</a></li>
</ul>
<li><a href="ecolastic-epdm-granules.php"><span>EPDM RUBBER</span></a></li>
<li><a href="resources.php"><span>DATA SHEETS</span></a></li>
</ul>
答案 1 :(得分：0)
准确使用：
<!DOCTYPE HTML>
<!--
Landed by HTML5 UP
html5up.net | @ajlkn
-->
<html>
<head>
<title>EPDM Polmers | EPDM Rubber Granules | Poured-In-Place Rubber</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="./css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript" src="./js/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
<link rel="stylesheet" href="./js/BackToTop.jquery.css" type="text/css" />
</head>
<body>
<div id="page-wrapper">
<!-- Header -->
<div class="keywords">
<?php echo $data[ "topText"] ?>
</div>
<!--end keywords-->
<header id="header">
<div class="container">
<div id="logo">
<a href="index.php"><img src="images/epdm-logo.png" class="image-full">
</a>
</div>
<div id="chris">
<a href="index.php"><img src="images/ISO9001.jpg" class="image-full">
</a>
</div>
<nav id="nav">
<ul>
<li><a href="index.php"><span>HOME</span></a>
</li>
<li><a href="aboutus.php"><span>OUR COMPANY</span></a>
</li>
<li class="dropdwn"><a href="products.php"><span>PRODUCTS</span></a>
<ul>
<li><a href="ecolastic-epdm-granules.php"><span>EPDM Rubber Granules</span></a>
</li>
<li><a href="airethane-polyurethane-products.php">Polyurethane Binder</a>
</li>
</ul>
</li>
<li><a href="ecolastic-epdm-granules.php"><span>EPDM RUBBER</span></a>
</li>
<li><a href="resources.php"><span>DATA SHEETS</span></a>
</li>
</ul>
</nav>
<div class="clear"></div>
</div>
<!--end container-->
</header>
</div>
</body>
</html>
粘贴此css：
<style>
#page-wrapper {
padding-top: 0em;
}
#header {} #header #logo {
display: block;
float: left;
max-width: 100px;
margin: 25px auto;
}
#chris {
display: block;
float: right;
max-width: 100px;
margin: 25px auto;
}
#header nav {
margin-top: 3.5em;
display: block;
float: right;
background: url(../../images/nav-tail.gif) repeat-x top;
}
#header nav ul {
margin: 0;
padding: 0;
}
#header nav ul li {
display: block;
float: left;
margin: 0;
padding: 0;
background: url(../../images/nav-border.gif) right center no-repeat;
}
#header nav ul li:last-child {
background: none;
}
#header nav ul li a {
padding: 0.9em 2.85em;
text-decoration: none;
background: #ccc;
}
#header nav ul li a,
#header nav ul li span {
border: 0;
color: inherit;
display: block;
height: inherit;
line-height: inherit;
outline: 0;
}
#header nav ul li.current {
color: #FFF;
background: rgb(76, 76, 76);
background: -moz-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(43, 43, 43, 1) 54%, rgba(19, 19, 19, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(76, 76, 76, 1)), color-stop(54%, rgba(43, 43, 43, 1)), color-stop(100%, rgba(19, 19, 19, 1)));
background: -webkit-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(43, 43, 43, 1) 54%, rgba(19, 19, 19, 1) 100%);
background: -o-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(43, 43, 43, 1) 54%, rgba(19, 19, 19, 1) 100%);
background: -ms-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(43, 43, 43, 1) 54%, rgba(19, 19, 19, 1) 100%);
background: linear-gradient(to bottom, rgba(76, 76, 76, 1) 0%, rgba(43, 43, 43, 1) 54%, rgba(19, 19, 19, 1) 100%);
}
#nav ul li:hover a {
background: #333;
}
#header nav ul li:hover {
background: #333;
}
#header nav ul li:hover a {
color: #FFF !important;
}
#header nav ul li a:not(.button):before,
#header nav ul li span:not(.button):before {
margin-right: 0.5em;
}
#header nav ul li.active > a,
#header nav ul li.active > span {
color: #fff;
background: #333;
}
#header nav ul li > ul {
max-width: 230px;
opacity: 0;
transition: opacity linear 0.15s;
}
#header nav ul li > ul > li {
float: left;
width: 100%;
display: block;
}
#header nav ul li > ul > li > a {
padding: 10px 10px;
background: #037dc8;
color: #fff;
border-bottom: solid 1px #ccc;
text-align: center;
}
#header nav ul li > ul > li:hover > a {
background: #548c0a;
color: #fff;
}
#header nav ul li:hover > ul {
display: block;
opacity: 1;
}
.dropdwn > a::before {
content: "▼";
position: absolute;
left: 175px;
}
.dropdwn > a {
position: relative;
}
</style>
希望这会对你有所帮助。如果有任何查询，请告诉我？