Main menu items failing to display sub menu options

I am in need of assistance as I am facing the same issue on two WordPress twin websites that are using the same theme (Newmagz), which is no longer purchased and therefore not supported. The submenus in the main menu are simply not appearing. I have checked the code using Chrome's and Safari's DevTools, and I can see that the submenu is there, but I cannot determine why it is not displaying. It appears to be a CSS issue, but despite multiple attempts, I have been unable to pinpoint the problem.

The CSS code governing the hover effect on the main menu is as follows:

$('.site-navigation .menu-item-has-children').on('hover', function() {
  $(this).children('.sub-menu').stop().slideToggle('fast');
})

.site-navigation ul li.menu-item-has-children ul.sub-menu {
    position: absolute;
    display: none;
    z-index: 50;
}

.site-navigation > ul > li.menu-item-has-children:hover:before {
    position: absolute;
    top: 43px;
    left: 50%;
}

.site-navigation ul li.menu-item-has-children ul.sub-menu li {
    display: inline-block;
    width: 100%;
    margin-bottom: 0;
}

nav#main-menu.site-navigation ul li.menu-item-has-children ul.sub-menu li:hover a {
    background: #c51818;
    display: inline-block;
}

Thank you in advance for any assistance!

csswordpress

Answer №1

Within the 

.site-navigation ul li.menu-item-has-children ul.sub-menu
section of your code, there appears to be a unnecessary display: none; property. To troubleshoot this issue in the future, you can use your browser's developer tools to identify elements that are not displaying as expected.

.site-navigation ul li.menu-item-has-children ul.sub-menu {
    position: absolute;
    display: none; /* please remove this line */
    z-index: 50;
}


$('.site-navigation .menu-item-has-children').on('hover', function() {
  $(this).children('.sub-menu').stop().slideToggle('fast');
})
.site-navigation ul li.menu-item-has-children ul.sub-menu {
    position: absolute;
    z-index: 50;
}

.site-navigation > ul > li.menu-item-has-children:hover:before {
    position: absolute;
    top: 43px;
    left: 50%;
}

.site-navigation ul li.menu-item-has-children ul.sub-menu li {
    display: inline-block;
    width: 100%;
    margin-bottom: 0;
}

nav#main-menu.site-navigation ul li.menu-item-has-children ul.sub-menu li:hover a {
    background: #c51818;
    display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id ="main-menu" class="site-navigation">
  <ul>
    <li class="menu-item-has-children">
      <ul class="sub-menu">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
      </ul>
    </li>
    <li class="menu-item-has-children">
      <ul class="sub-menu">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
      </ul>
    </li>
  </ul>
</nav>

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

Tips for implementing a checkbox (with tick/untick functionality) as a replacement for a plus/minus toggle using HTML

Is it possible to use checkboxes instead of plus and minus signs for expanding and collapsing sections? Can the plus and minus symbols be incorporated into the checkbox itself, so that clicking on the checkbox toggles between plus and minus states? Any hel ...

javascripthtmlcssreactjsbootstrap-4

How to create a see-through background using three.js

I am new to working with three.js and recently came across a codepen that caught my attention. However, I am facing difficulties while trying to change the background color. After exploring various questions related to this issue, I attempted to add { alp ...

javascriptcssanimationthree.js

Create a navigation bar using CSS that is designed from an unordered list without any specific

Is it possible to create a multilevel menu using only CSS for the menu structure mentioned below? Websites like cssmenumaker.com showcase examples of menus with 2-3 level submenus by adding classes like has-submenu. Can we achieve this without adding any ...

jqueryhtmlcssmenu

Jquery function for determining height across multiple browsers

I am currently facing an issue with setting the height of table cells in my project. While everything works smoothly on most browsers, Firefox seems to add borders to the overall height which is causing inconsistency across different browsers. If anyone k ...

javascriptjquerycss

Obtaining hyperlinks to encircle the sound button

Code 1: If you notice, after clicking on the image, the audio button appears and plays without any surrounding links. How can I enable the links around the audio button in Code 1? https://jsfiddle.net/7ux1s23j/29/ https://i.sstatic.net/75wlN.png < ...

javascriptcssaudiohtml5-audio

Container for grid template columns and responsive window in a single row

Imagine having around 250 divs with the class slider-item styled in a certain way. You have a responsive grid in CSS called A which arranges these divs as columns/items when the window resizes, with a minimum item width of 240px. Check out how it looks bel ...

javascripthtmlcsscss-grid

Check out the page design for section one!

I have been attempting to create a link to a specific section on a one-page website. Sometimes it works oddly, but most of the time it gets stuck at the section I clicked on and then manual scrolling does not function properly. From what I've researc ...

javascripthtmlcssonepage-checkout

Need help addressing a sliding page issue in my Upwork clone script using JavaScript

For those familiar with Upwork's UI, you may have noticed a small feature I implemented. When a user clicks on a freelance job offer, another page opens from the left side using transform: translate(120%) to transform: translate(0). The issue arises ...

javascripthtmlcss

Struggling to eliminate the padding beneath the menu items in Bootstrap?

I'm having trouble adjusting the padding inside my menu. I want to make it less chunky and large, but so far I've only been successful in removing the top padding. The bottom padding just won't budge. Here's the code that helped fix th ...

jqueryhtmltwitter-bootstrapcss

Troubleshoot: Inability to highlight a column and row in a table using ::after and ::before

To create a hover effect where the corresponding column and row are highlighted when the mouse is on a cell, as well as highlighting the row for player 1's actions and the column for player 2's actions, I attempted the following code: /* CSS Cod ...

htmlcss

"Need guidance with jQuery and CSS layout alignment on the

So here's the scenario I'm dealing with: <div id="tabs"> <div id="tab_one"> Content for tab one </div> <div id="tab_two"> Content for tab two </div> <div id="tab_three"> ...

jquerycsstabsposition

What is the process for closing the side menu by clicking on the dark area?

I created a basic side navigation menu. When you resize the window to a smaller size, a red square will appear. If you click on this red square, the menu will open. The menu opens correctly, but I want it to close when I click on the dark area instead of ...

javascripthtmlcss

When the textfield mui is set to shrink, an additional space appears in the label when using a font size of 12px

Struggling to customize the appearance of the textField component, particularly with the label when it is minimized: import * as React from "react"; import TextField from "@mui/material/TextField"; import { createTheme } from "@mui ...

javascriptcssreactjsmaterial-ui

CSS cascading not happening

Within the usersettings.css.erb file, line numbers are provided for easier reference. 11 #userSettingMain .form-horizontal .controls { 12 13 margin-left: 30px; 14 } 15 16 #user_birthday_3i{ 17 18 margin-left: 0px; 19 } U ...

csstwitter-bootstrapruby-on-rails-3css-cascade

Is there a way to create an effect where the color of a floating action button changes when you hover over it, similar to a filter?

I'm new to using the <Fab /> element and I'm struggling to figure out how to implement a hover effect that will change the button's color. Here's what I have so far: JavaScript: <Fab variant="extended" className=&quo ...

javascriptcssmaterial-ui

What are some ways to prompt electron to refresh its rendering with updated CSS?

I am currently in the process of developing my first Electron app on Windows 10, using Visual Studio Code and Git Bash as my primary tools. However, I have encountered a frustrating issue where my app has suddenly stopped updating based on css changes. Spe ...

cssnode.jselectronbrowser-cache

What is preventing me from directly taking from Codepen?

Looking to experiment with a different landing page? Take inspiration from this example. Here's the HTML snippet, for more details check out the full code on Codepen. <link href='http://fonts.googleapis.com/css?family=Lobster' rel=&apos ...

csshtmlopen-sourcesublimetext2

Steps for creating a fixed menu bar that remains stationary while scrolling

I am facing three challenges: When I hover over my menu links, I want them to become 'bold', but it causes the items on the right to move slightly. How can I prevent this movement? In regard to the dropdown menu on "Two", how can I ensure t ...

htmlcss

What is the best way to stop div animations when clicking with jQuery?

Upon loading the page, a div animates automatically. There is also a button present. When the button is clicked, I would like to create a new div and animate it the same way as the first one. However, when this happens, the position of the first div also ...

javascriptjqueryhtmlcssanimation

Tips for creating a tabbed form that easily glides between tabs

After coming across this form design, I am inspired to create something similar with a twist. Instead of having each tab display all content at once, I want the tabs to scroll from right to left, giving it a more animated effect. Can someone offer suggesti ...

javascripthtmlcss