Whenever I hover over a menu item in my navigation, a white line appears underneath

I am currently troubleshooting an issue on my website where a white line appears across two menu items when hovering over a drop-down item in the navigation. I can't figure out what's causing this problem. Below is the code for the navigation (I'm using the Genesis framework for WordPress).

.genesis-nav-menu a {
border: none;
color: #919594;
display: block;
font-size: 14px;
padding: 20px;
position: relative;
top: 35px;
}

.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover {
color: #C77D3C;
border: 2px solid #C77D3C;
border-radius: 12px;
}

htmlcsswordpressdrop-down-menu

Answer №1

The .site-header .sub-menu on your website currently has a visible border-top. If you were to remove this border, it would no longer display on the page.

Interestingly, even though you have commented out this styling in your CSS file, it is still being applied. The reason behind this unexpected behavior remains a mystery for you to investigate. However, at least now you have identified the source of the issue :)

Answer №2

Make sure to add the code "stroke 1155" in your CSS file.

.site-header .sub-menu {
    border-top: 1px solid #eee;
}

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

Typing in text using Selenium, choosing an option from a dropdown menu, and pressing the enter key

Currently, I am attempting to scrape data from the following website: Unfortunately, the necessary data is not directly available in the URL, so I have resorted to using a chromedriver. Below is the code I am working with: public static void main(Str ...

javaseleniumdrop-down-menusendkeys

Guide to creating an inline form that spans the entire width below the navbar logo within the "navbar" component

I'm new to working with bootstrap and trying to create an inline form in the navbar next to the navbar-brand. However, as I resize the window, the form ends up below the navbar-brand link and doesn't align properly, making it look awkward. Can so ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Using CSS to create a smooth transition effect when a form is placed

I have a box that fades out when clicked, but the form inside it is not working properly. When I click on '17 | Lampe im Esszimmer ... C301 | Frau Müller', the 'Beschreibung' and 'Notiz' sections appear, but the complete for ...

htmlcssformstransition

How to implement multiple conditions with ng-if in HTML

I need to implement a button that is visible only for specific index numbers: <tbody data-ng-repeat="(wholesalerIndex, wholesaler) in wholesalers"> <tr> <td> <but ...

javascriptangularjshtml

Enclosing hyperlinks within a container with a set width limit

I've set up a fixed width div with several links inside, each with text containing non-breaking spaces between the words. My goal is to ensure that when a link reaches the edge of the div, the entire link moves down to the next line. While testing i ...

htmlcss

Did I accidentally overlook a tag for this stylish stripe mesh Gradient design?

I've been attempting to replicate the striped animated Gradient mesh using whatamesh.vercel.app. I've set up the JS file, inserted all the gist code into it, and placed everything in the correct locations, but unfortunately, it's not functio ...

javascripthtmlcss

Is there a way to execute React JS functions within a webview using my Android code?

Currently, I am dealing with a React-Typescript webapp that is being hosted in a WebView within my Android application. My main goal is to transfer data from the Android client to the Webview. However, this task becomes more complex due to the fact that i ...

androidhtmlreactjstypescriptandroid-webview

PHP Form Submission Issue

I'm currently facing an issue with submitting a form using PHP and PHPMailer. Initially, I created a form based on the complete form example from w3schools. After that, I attempted to send the form via email by integrating PHPMailer, but unfortunatel ...

phphtmlforms

Preserving hyperlinks while transferring text from an HTML element using JavaScript

I'm struggling to preserve links from HTML elements while copying rich text, but have been unable to achieve it despite numerous attempts. The following code represents my best effort so far, however it only copies text without maintaining the links ...

javascripthtmltypescript

Removing a faded out div with Vanilla JavaScript

I am struggling with a JS transition issue. My goal is to have the div automatically removed once it reaches opacity 0. However, currently I need to move my mouse out of the div area for it to be removed. This is because of a mouseleave event listener that ...

javascripthtmlcss

Move information from a spreadsheet into an online form

Looking to transfer data from a sheet to a dropdown in a form using Google Script. The data has been gathered in a table and I believe transferring it through a JS script is the best solution. (Let me know if you have a better option) Some tests have been ...

htmlformsgoogle-apps-scriptgoogle-sheets

"Using AngularJS $http to iterate through each object in a loop and encounter a problem

I am currently developing an AngularJS app for personal training, but I have encountered a few errors along the way. The issue arises when I receive Json data from an API and try to display a marker for each object. However, I seem to have made a mistake ...

javascripthtmlangularjsdictionaryleaflet

Load dynamic content seamlessly without the need to refresh the page

I am looking to implement a way to load content on my page without having to refresh the entire page. Can anyone help me troubleshoot this code? Additionally, I would like to add transitions between pages. For example, when clicking on "services" from the ...

jqueryhtml

Remove the outline on a particular input and retain only its border

Even after trying to use "outline: 0", nothing seems to change. #input_field { outline: 0; width: fit-content; margin: auto; margin-top: 20%; border-radius: 30px; border: 2px solid turquoise; padding: 6px; } <div id="input_field"> ...

htmlcssoutline

What is the best way to show only a section of a background in CSS?

Being a novice in HTML and CSS, I am facing the challenge of displaying an image as a banner with text overlay. Despite trying various methods, it seems impossible to achieve this directly with an image element, so I resorted to using CSS's background ...

htmlcssimagebootstrap-4image-size

Aligning navigation text in a grid layout

I am currently working on evenly distributing my 8 navigation links across the navigation bar. Below is the HTML code for my navigation: <nav> <ul class="nav"> <li><a href="index.html">Home</a></li> < ...

htmlcssnavcentering

I'm having trouble retrieving a list of elements from a Python class in order to showcase them in an HTML file

I've written a snippet of code in my views.py file where I defined a class called Pizza. from django.shortcuts import render from .models import Pizza def index(request): pizzas = Pizza.objects.all() return render(request, 'menu/index. ...

htmldjangodjango-viewsdjango-templatespycharm

Generating a pop-up window upon clicking a specific word within the text

I've been tasked with converting a textbook into a website for my teacher, and I've encountered an issue. Within a div element, there is text in a foreign language. Certain words need to be clickable, triggering a pop-up box with their translatio ...

javascriptjqueryhtmlcss

Shifting the background image as we reach its limit

I'm creating a website for my company, but I struggle with HTML. One feature I want is to have a background image that stays static while reading the site, but then follows the user when they reach the end of the image. I know how to make an image f ...

htmlbackground

Specify the height of a div tag based on a certain condition

I'm trying to style a div tag in a specific way: If the content inside the div is less than 100px, I want the div tag's height to be exactly 100px. However, if the content's height exceeds 100px, I want the div tag's height to adjust au ...

htmlcss