WordPress: Struggling to Show Sub-Menu on Hover Feature Not Functioning

I'm having trouble getting the .sub-menu to appear when hovering over the 'about' page in my WordPress navigation. It doesn't seem to be working as expected.

I'm not sure whether the issue lies with my jQuery or my CSS. What modifications should I make to ensure that the sub-menu displays on hover?

Rendered HTML in WordPress

 <div class="menu-primary-menu-links-container">
    <ul id="menu-primary-menu-links" class="menu">
        <li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-21 current_page_item menu-item-167"><a href="http://localhost/wordpress/">Home</a></li>
        <li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-165"><a href="http://localhost/wordpress/about/">About</a>

            <ul class="sub-menu">
                <li id="menu-item-180" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-180"><a href="http://localhost/wordpress/our-team/">Our Team</a></li>
                <li id="menu-item-179" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-179"><a href="http://localhost/wordpress/our-mission/">Our Mission</a></li>
                <li id="menu-item-178" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-178"><a href="http://localhost/wordpress/members-data-bank/">Members Data Bank</a></li>
            </ul>
        </li>
        <li id="menu-item-170" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-170"><a href="http://localhost/wordpress/news-updates/">News Updates</a></li>
        <li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-166"><a href="http://localhost/wordpress/blog/">Blog</a></li>
        <li id="menu-item-164" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-164"><a href="http://localhost/wordpress/contact/">Contact</a></li>
    </ul>
</div>

CSS

.show-sub-menu-pages {
    display: flex !important;
    flex-direction: column !important;  
}

 .sub-menu {
    display: none !important;
    padding: 0;
    z-index: 999;
    background-color: red !important;
    position: absolute;
    right:220px;
    top: 60px;

}

JQuery 

$('#menu-item-165').hover(
       function(){ $(this).addClass('show-sub-menu-pages') }
)
javascriptjqueryhtmlcsswordpress

Answer №1

Make sure not to overlook the semicolons at the end of your code.

$('#menu-item-165').hover(function(){ 
    $(this).addClass('show-sub-menu-pages');
});

If you have checked for semicolons, consider using a mouseover function instead...

$('#menu-item-165').mouseover(function(){ 
    $(this).addClass('show-sub-menu-pages');
});

In addition, I recommend avoiding the use of importants unless absolutely necessary as they could cause interference. Here's an example:

.sub-menu {
   display: none;
   padding: 0;
   z-index: 999;
   background-color: red;
   position: absolute;
   right:220px;
   top: 60px;
}

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

What is the most effective way to align a thumb to the left and content to the right?

What is considered the optimal method for positioning an image to the left with two text fields to the right of it? Is using floats or positioning better? <li> <a href=""> <img src=""THUMB HERE /> </a> <a href=""> TITLE </ ...

css

Is it possible for me to send my form values using jQuery .load() and have them be interpreted by PHP $_POST?

Is it possible to pass form values using the load() function in jQuery and then access them as $_POST parameters in PHP? ... ...

phpjquery

PHP Error: Sound Reflection

My HTML code is quite lengthy and I am using the echo function to display it. However, I am encountering an error. Interestingly, when I remove the problematic code snippets highlighted by the error messages, a new error appears in the body section of the ...

phphtmlcompiler-errorsecho

Is it possible to verify an email address using a "Stealthy Form"?

I am exploring the use of HTML5's type="email" validation to develop a function for validating email addresses. My goal is to create a form and add an input that has its type set as email. By attempting to submit the form, I aim to determine whether ...

javascriptvalidationemail

Console log displays varied outputs for identical arrays

Having an array in a static form and one that is filled using the ajax post function, I initially planned to replace the static array with the dynamic one. However, upon closer inspection, it seems that the two arrays are not matching. Array 1 (static) ...

javascriptphparraysajax

Prevent Sending Blank Forms with Stripe js

Currently, I am working on a solution to prevent users from submitting the stripe form when certain inputs are left empty. To achieve this, I have integrated stripe.js elements into my form and implemented the form submission handling within my vue compone ...

javascriptvue.jsstripe-payments

Rendering external HTML content within a React component can be achieved by utilizing parsing techniques

In my React application, I have a component that receives HTML content as a string field in the props from an API call. My objectives are: To render this HTML content with styles applied. To parse the content and detect "accept-comments" tags within sec ...

javascriptreactjs

What is the process of transforming a tree into a JSON object?

I have a tree structure that I need to convert into JSON format for use with a jquery option tree. NodeId, Title, Level 1, cars, 0 2, boats, 0 3, oldtimer, 1 4, trucks, 1 5, heavytrucks, 4 The desired tree structure is as follows: boats cars - oldtimer - ...

javascriptjsontree

Tips for Editing HTML table cells inline with jQuery

Is there a way to edit a table cell by clicking on it? I've been trying, but it's not updating properly. It seems that when I try to update the first cell in the first row of the last column, it works fine. However, if I try to update a cell in ...

jqueryhtmlinline-editing

What are some ways to expand the width and increase the spacing of bootstrap cards?

On my website, I have created Bootstrap cards that are displayed on two different pages. One set of cards is shown on the landing page, where I am looking to increase the spacing between them. The other set appears on the books page, and I want to make t ...

csslaraveltwitter-bootstrap

What is the best way to extract all "conditions" nested under the key "logic" at the 0th index in a JSON object?

I need to manipulate a nested object by removing every "condition" where the key is "logic" and the value is 0 from it. Here is an example of the object structure: Original input: [ { "conditions": [ { "logic": "AND", "paramet ...

javascriptarraysjsonreactjsloops

Identifying Hashtags with Javascript

I am trying to identify hashtags (#example) in a string using javascript and convert them to <a href='#/tags/example'>example</a> Currently, I have this code: var text = '#hello This is an #example of some text'; text.r ...

javascriptregexangularjshashtag

Is it possible for PHP to not provide an image to HTML?

I'm currently facing an issue trying to display an image in HTML using a PHP script. Despite my best efforts, it's not functioning as expected :-( Here is the code snippet from my image.php script: <? $_GET['f'] = 'all_thre ...

phphtmlimage

XML, XTL, and HyperText Markup Language (HTML)

I am facing a challenge with transforming a list in an XML file into an HTML view using XSLT. The nesting of the lists is causing issues and the output is not meeting my requirements. XML: <book-part> <list id="ch4list2" list-type="simple"> & ...

htmlxmlxslt

Ensuring a height of 100% with the utilization of two divs positioned using float left and right, along with

It's really quite simple: HTML: <div> <section class="left"> </section> <section class="right"> </section> <div class="clear"></div> </div> CSS: div ...

javascriptjqueryhtmlcss

Adjust the size of an image while maintaining its aspect ratio with the click of a button

Looking for guidance on maintaining aspect ratio when zooming in or out an image. I've created a basic example but struggling with keeping the aspect ratio intact. Is there a way to set a minimum size when decreasing the image? Appreciate any help ...

jquery

What is the method for tallying CSS page breaks in printed HTML documents?

Currently, for my report generation process using HTML and CSS to manage page breaks dynamically. I've enabled the option for users to print multiple reports at once by combining them into different sections within a single HTML document. This helps p ...

javascripthtmlcssprinting

What is the process for incorporating JavaScript files into an Angular project?

I have a template that works perfectly fine on Visual Studio. However, when I try to use it on my Angular project, I encounter an issue with the JavaScript code. I have filled the app.component.html file with the corresponding HTML code and imported the ...

javascriptangular

Remove attributes from a collection of objects

Here is an array of objects: let array = [{ firstName: "John", lastName : "Doe", id:5566, weight: 70 },{ firstName: "Francis", lastName : "Max", id:5567, weight: 85 }]; I am looking to remove the properties "lastName" and "weight" for all obj ...

javascriptarraysobjectjavascript-objects

The 'getGridMerchantLocationData' function contains duplicate definitions for both DataSource and DataSourceID. Please remove one of the definitions

I am having trouble binding data from a dataset. Can someone review my code and point out where I may be going wrong? The current issue is that it's not binding and throwing an exception: "Both DataSource and DataSourceID are defined on 'getGridm ...

c#asp.nethtml