Issues with the functionality of the CSS menu border animation

One issue that we are currently facing involves our menu bar with line animation on hover effect. Unfortunately, this animation is not working properly in Safari 5.1.7 and there are also some errors on Chrome web browser. For example, when hovering over any link in the fourth menu, the line blinks and there is a tiny 1px white dot visible:

Here is the HTML code:

<nav id="bannerNav">
 <ul>
    <li class="active"><a href="who-we-are.html"><span>Menu Bar 1</span> <b></b></a></li>
    <li><a href="our-group-companies.html"><span>Menu Bar 2</span> <b></b></a></li>
    <li><a href="annual-report.html"><span>Menu Bar 3</span> <b></b></a></li>
    <li><a href="social-responsibility.html"><span>Menu Bar 4</span> <b></b></a></li>
    <li><a href="media-news.html"><span>Menu Bar 5</span></a></li>
</ul>
</nav>

This is the CSS code being used:

body{background-color: #000000;}
#bannerNav{margin-top: 26px; float: right;}
#bannerNav ul{float: right; margin: 0; padding: 0; font-size: 17px;}
#bannerNav ul li{float: left; margin: 0; position: relative; list-style: none; }
#bannerNav ul li a{color: #ffffff; padding: 7px 10px; border: solid 1px rgba(0,0,0,0); margin-left: -3px;}
#bannerNav ul li b{background: #fff;  color: #fff;  height: 15px; right:0px; position: absolute; top: 9px; width: 1px;}
#bannerNav ul li:hover b, #bannerNav ul li.active b{display: none;}

You can view the full working code here.

jqueryhtmlcss

Answer №1

To resolve the issue in Chrome, you should include the CSS property backface-visibility within the selector #bannerNav ul li a. Here is the updated line of code:

#bannerNav ul li a{color: #ffffff; padding: 7px 10px; border: solid 1px rgba(0,0,0,0); margin-left: -3px; backface-visibility: hidden; -webkit-backface-visibility: hidden;}

Answer №2

Include these CSS styles in your code for the desired effect.

#bannerNav a:before {
    background: white none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    -ms-transform: translateY (0%);
    -webkit-transform: translateY (0%);
    -moz-transform: translateY (0%);
    -o-transform: translateY (0%);
    transform: translateY(0%);
    transition: all 0.3s ease 0s;
    width: 1px;
}
#bannerNav a:after {
    background: white none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    -ms-transform: translateY (0%);
    -webkit-transform: translateY (0%);
    -moz-transform: translateY (0%);
    -o-transform: translateY (0%);
    transform: translateY(0%);
    transition: all 0.3s ease 0s;
    width: 1px;
}

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

ways to display a chosen option in a dropdown menu

Below is the code snippet I am currently using, which involves JQuery and Bootstrap 4: $('.dropdown-menu li').on('click', function() { var selectedValue = $(this).text(); $('.dropdown-select').text(selectedValue); }); & ...

javascripthtmlbootstrap-4

Having trouble with the postcss-import grunt plugin?

Here is the layout of my project: my_project |-- css | -- main.css |-- css-dev | -- main.css |-- node_modules | -- bootstrap | -- dist | -- css | -- bootstrap.css |-- package.json `-- Gruntfile.js The contents of my Gr ...

javascriptcsstwitter-bootstrapgruntjs

Aggregated Mvc Razor components

After creating a layout in ASP.NET MVC, I utilized a script bundle to load the jQuery library. Unfortunately, it seems that the jQuery library is not being loaded properly. The structure of my layout is as follows: <!DOCTYPE html> <html> < ...

jqueryasp.net-mvchtml

Ensuring seamless user recognition when redirecting them to a new HTML page

In our web application, new users are assigned a standard password upon registration. Upon logging in with the standard password, they are automatically redirected to a 'change Password' page where they can update their password. However, we hav ...

javascripthtmlangularjschange-password

PHP processing and converting to a string output

I have a PHP page (content.php) that includes plain HTML and content accessed via PHP variables <html> <head> </head> <body> <h1><?php echo $title; ?></h1> </body> </html> ...

phphtml

I am unfamiliar with this particular operation

I'm currently attempting to integrate MD5 .js from webtoolkit into my project. However, I am facing an issue where the method MD5 is not being recognized when invoked from a script in jQuery. I have already ruled out any problems with loading the js f ...

javascriptjquerymd5

Easily transfer files without the need for a complete page refresh

The Strategy To ensure a seamless user experience, my goal is to upload files without triggering a full page refresh. All uploaded files will be temporarily stored, either in session or cookies, until the user successfully completes all form fields. File ...

c#jqueryasp.netajaxfile-upload

the mobile website is not properly aligned on a horizontal axis

As I work on creating a mobile version of my website, I've come across a challenge: The entire site fits perfectly on the computer at a browser width of 480px, but when viewed on my mobile phone (regardless of the browser used), it leaves space on the ...

javascripthtmlcssmobileweb

Importing fonts using CSS

Currently, I have 4 different fonts that I need to incorporate into a website, and their files are saved within my website folder. Baskerville.ttc BellGothicstd-Black.otf BellGothicstd-Bold.otf JennaSue.ttf I attempted to import the fonts using @Import, ...

htmlcssfonts

The JavaScript loop is not displaying the correct calculation outcome

$(document).ready(function () { //$('#customer_info #next_step').click(function() { $.getJSON("order/summary_process2.php?jsoncallback=?", function (data) { //iterate over all items in the JSON array for (var x = 0; x & ...

javascriptjsonjquery

Picking a File Directory within an HTML Form

I am in the process of creating an intranet site for my company, and one of its functionalities is to store a database of files along with their locations as provided by users. The files are located on a network drive, and those accessing the database shou ...

htmlformsfilepath

What is the best way to retrieve the previously chosen item from an array?

I have successfully implemented dynamic pill tabs with one minor issue remaining. The most crucial aspect is that when I remove a pill, I want it to return to the previously opened tab. I have provided a StackBlitz example without routes on this page: -> ...

javascripthtmlcssangularangular-material

Converting HTML and CSS to PDF in Java using iText

I've been working on converting HTML to PDF. Initially, I transformed my HTML code into XHTML using the resources provided in this link: After successfully displaying the generated XHTML code in a browser by creating an HTML file for testing purposes ...

javahtmlcsspdfitext

detecting click or submission actions on iOS

Below is the HTML code for a form submit that has been modified to prevent refreshing on submission. Everything seemed to be working fine, until I encountered an issue with the submit button not functioning on iOS. The onsubmit event simply wouldn't ...

javascriptjqueryhtmliosdom

Choosing the right framework for implementing push notifications can be a critical decision. Should

I am currently working on a Java application that requires the server to send push notifications to the client every one second. To achieve this, I am using HTML5 server-sent events for one-way communication from the server to the client. However, my conce ...

javascripthtmlnode.jspush-notificationvert.x

How to implement the @click event on a Bootstrap4 dropdown menu in a Nuxt.js project

I am working with a Bootstrap 4 dropdown that I want to customize by changing its button's background color when clicked. However, when I tried to add the click event, the dropdown menu no longer hides. Below is my code: //template <div class=" ...

javascripthtmlcssbootstrap-4drop-down-menu

Scraping Data: Uncover JSON data embedded in HTML code

I need help extracting what appears to be JSON data embedded within an HTML script. The script is presented like this on the webpage: <script> $(document).ready(function(){ var terms = new Verba.Compare.Collections.Terms([{"id":"6436","name ...

pythonhtmljsonxpathscrapy

Looking to implement a time delay within a jQuery function?

I'm working on a jQuery function that requires a one second delay when the captcha is filled in correctly. This delay allows the #captchaStatus to display before moving on to the next step of posting html content. While I'm still learning jQuery ...

jquerydelay

Strange spacing in Angular Material checkbox

I have a container with an angular material checkbox inside. The background of the container is black, so I changed the background color of the checkbox to white for visibility. However, there seems to be some unwanted spacing on the right side of the chec ...

htmlcssangularjscheckboxangular-material

Passing Javascript variable dynamically to an AngularJS function

Is it possible to dynamically pass only a JavaScript variable to an Angular function without using a scope variable in certain scenarios? Please refer to the code snippet on this JSFiddle link. <div style="border:solid;color:red;Margin-bottom:4px;"& ...

javascriptjqueryangularjs