The navigation link background hover feature is not functioning properly in Google Chrome

Hello everyone! I'm running into a little issue with the hover effect on my navigation menu in Chrome. It seems to be working fine in Mozilla, but not all of the menu items change color when hovered over in Chrome. I would really appreciate any help or suggestions on how to fix this problem. Thanks!

    <?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;
                        }
cssgoogle-chromehover

Answer №1

Initially attempted to edit some of the code for proper formatting. Discovered an issue in your code:

...
<ul>
  <li><a href="index.php"><span>HOME</span></a></li>
    <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>
...

It seems that many closing tags are missing in your code.

An <li> tag should always be followed by a </li> tag for valid HTML. Some browsers may have managed to display your content, while others like Chrome were unable due to this issue.

If you address these problems and still encounter difficulties, feel free to reach out for further assistance.

Below is the corrected snippet provided for reference. However, there may still be additional issues with the rest of your HTML markup.

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

Answer №2

Ensure to use the following code precisely:

<!DOCTYPE HTML>
<!--
        Landing Page designed by HTML5 UP
        Visit html5up.net | Connect with @ajlkn
    -->
<html>

<head>
    <title>EPDM Polymers | 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>
        <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>
        </header>
    </div>
</body>

</html>

Please insert the following CSS code into the designated area:

<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;
    }

/* More styles to be added as needed */

</style>

If you have any further questions or concerns, feel free to ask!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS code that causes the animated photo banner to reset instead of continuously looping back to the first

I followed a tutorial and created this banner using HTML and CSS. However, I encountered an issue where instead of the banner continuing in loops, it keeps resetting. Since we haven't covered JavaScript yet in university, I'm looking for help to ...

htmlcss

Changing the opacity on hover doesn't seem to be working

I currently have a simple dropdown menu where the different menu choices are supposed to change opacity when hovered over. The default opacity is set at 0.5. Below is the hover function in my jQuery code: $('#cat1 > li > a').hover(functio ...

jquerycss

Clicking with jQuery to float left and then bringing back

I have written this JavaScript code that is supposed to float the address div to the center when you click on the info panel using the "addressmoved" class. Challenges However, when I click on the trigger button, instead of the address div moving to the ...

jqueryhtmlcssajaxonclick

What is the solution for resolving a significant spacing issue within a block of text?

I noticed that there is a significant gap between two of my divs when viewed in a browser. Here is the code: <div id="title-1"> <p>XYZ Corp is excited to introduce our latest project - Discover XYZ</p> </div> <d ...

htmlcss

What is the best way to preserve the scroll location when revisiting a page with lazy loading enabled?

My question is quite straightforward, just like the title suggests. I am looking to implement a feature similar to Twitter's behavior where when users navigate away from a page and return using the browser's back button, they are taken back to wh ...

javascriptpython-3.xdjangogoogle-chromebrowser

Can you explain the concept of offset in bootstrap?

I comprehend the concept of grids, where each row consists of 12 spaces. <div class="row"> <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div> The code ...

csstwitter-bootstrap

Ways to create a noticeable effect on an image button when hovering without causing a shift in the position

Check out my simple script here: http://jsfiddle.net/PA9Sf/ I am looking to make a specific button stand out when hovered over without affecting the position of other buttons on the page. The current implementation in the provided jsfiddle moves the butto ...

javascriptjqueryhtmlcss

What attribute should I utilize to ensure the image always takes priority over text when using @media queries?

resolution My goal is to have the image appear on top of the text when resizing the window, but maintain the appearance shown in the attached image when using a larger resolution. Below is the CSS code I am currently using: .section4 { text-align: cen ...

htmlcss

Ways to modify the background shade of an input field in a Django form when errors are present

My goal is to create a form that dynamically changes the background color of input fields to lightcoral when a user enters invalid data. Below is a snippet from the HTML file containing the form: <div id="div_formbox"> <form met ...

htmlcssdjangoforms

Is there a way to make a div come to life with animation when it's clicked, and then make it go back to its original

I've been dedicating several hours to finding a solution, but nothing has worked so far. My goal is to set up an animation where the user clicks on a square image, causing it to 'flip' into a trapeze shape similar to the new Windows logo. A ...

jqueryhtmljquery-uicss

Firefox having trouble displaying styles correctly

I just finished creating a website for my band, but I am having issues with it displaying correctly in Firefox. While everything looks great in Chrome and Safari, it seems like the stylesheet isn't loading at all in Firefox, leaving the page looking u ...

cssfirefox

Tips for customizing the appearance of li elements when hovering without changing the styles of their

Currently, I am tackling the task of customizing a sidebar menu using CSS. This menu structure involves nested <ul> and <li> elements. The issue at hand is that when sub-menu items are hovered over, their parent elements also become activated. ...

css

Is there a way to reduce the space occupied by my SVG and why am I encountering limitations in resizing it?

The issue with SVG extra space persisting even after trying various fixes is driving me crazy. When inspecting the SVG, there seems to be a large blue space that is pushing everything else down. I have experimented with different solutions like setting hei ...

htmlcsssvg

Using JavaScript or JQuery, move an image from one location to another by removing it and adding

Firstly, feel free to check out the JSFiddle example My task involves moving an image with the class "Full" after a div with the class "group-of-buttons" using JavaScript. Here is the snippet of HTML code: <img src="http://i.telegraph.co.uk/multimedia ...

javascriptjqueryhtmlcss

Use an if statement in Angular to conditionally add a title attribute with an empty value to HTML

How can I conditionally add the title attribute to a div without creating another div and using ngIf? If the permission is true, I want to include a title in my div. Here's what my current div looks like: <div (click)="goToChangelog()&quo ...

htmlcssangular

What is the best way to eliminate all borders from a select box?

Is there a way to completely remove all borders from the selectbox using either CSS or JQuery? The code snippet is as follows: <select id="doctor_ch"> <option value="1" selected>One</option> <option value="2">Two</option& ...

jqueryhtmlcssdrop-down-menu

Change the style of a specific media query when clicked

Here's the issue I'm facing: On my website, there is a sidebar menu located on the left-hand side. However, when the screen size decreases, the menu occupies too much space, so I have implemented a "minimize" feature for it. This involves applyi ...

htmlcsstwitter-bootstraprefactoringmedia-queries

What are the steps to achieve this shadowed look?

I have been attempting to replicate the shadow effects found on this website. After inspecting the CSS in Chrome, I am still unable to achieve the desired result with my current code: .imageShadow { background: #fff; -webkit-box-shadow: 0 0 5px 0 ...

csshtml

center commotion excitement vessel vertically

I am facing a dilemma once again and could really use a helping hand. I have created an exciting animation that I have placed within a Bootstrap 4 tab, but I'm struggling to center it vertically. Is there someone out there who could help me out? Tha ...

csshtmlbootstrap-4

What causes the unusual behavior of css property "all: unset" in the Safari browser on MacOS?

Here's the situation - the parent element has the CSS property all: unset. I noticed that in Safari (Version 12.1.1 (14607.2.6.1.1)), all the children of this parent are only affected by the * selector, ignoring inline styles and even the !important ...

htmlcsssafariunset