个人中心
gpt4 book ai didi

css - 导航链接背景悬停在谷歌浏览器中不起作用

转载 作者：太空宇宙 更新时间：2023-11-04 09:10:21 25 4
gpt4 key购买 nike

这是我的第一篇文章。当我悬停在 nav ul li a 中时，背景颜色出现问题。它在 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;
                        }

最佳答案

首先尝试编辑一些格式代码。在您的代码中遇到了这个:

...
<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>

关于css - 导航链接背景悬停在谷歌浏览器中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42171960/

25 4 0
文章推荐： c++ - 子进程在 fork 和 exec 后变为 Defunct
文章推荐： python反斜杠正则表达式的乐趣
文章推荐： python - 在 Python 中获取 numpy/scipy 中的日志比率
文章推荐： javascript - (Javascript) 将 Codepen 中的变量从 JS 窗口传递到 HTML <script></script> 模板
太空宇宙
个人简介

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

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