2017-02-11 55 views
0

这是我的第一篇文章。当我悬停在导航栏中时,我遇到背景颜色问题。它在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

工作正常吗? http://codepen.io/anon/pen/oBQPVx –

回答

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不是。这是一个猜测anywho ...

如果你可以解决一些这些问题,仍然有问题。请告诉我们,我们很乐意提供帮助。

以下是上述的固定片段。但是,其余的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> 
+0

你知道吗,我试过了,但不是你做过的。我把代码搞乱了,如果我在“聚氨酯粘合剂”之后关闭除标签之外的所有锂标签,它就会工作。不要问我为什么。非常感谢您的帮助! – webdevsd

+0

@webdevsd耶!乐意效劳!请将我的答案标记为解决方案。 Goodluck与你的发展:) – matt

+1

@webdevsd“聚氨酯粘合剂”后没有任何工作的原因是因为它的实际上无效的HTML在其当前状态。 ul中不能有'ul'标签。你只能在'ul'标签中使用'li'标签。希望有助于更多:) – matt

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> 

希望这会帮助你。让我知道是否有任何疑问?

相关问题