2017-02-11 88 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> 

希望這會幫助你。讓我知道是否有任何疑問?

相關問題