Issue with Submenu Styling in Custom Theme

Hi there, visit my website at:

I'm encountering a small issue with the drop down menu on my website. The submenu is getting stuck on the page when dropped and not hiding when I move away from it (you can see this on the categories block). Is there anything in my style.css that I can modify to fix this?

  • Oddly enough, I didn't have this problem when using the parent theme. It only started after creating and using a child theme.

Any suggestions or advice on how to resolve this issue would be greatly appreciated!

csswordpressdrop-down-menusubmenu

Answer №1

If you're uncertain, experiment with this CSS snippet below.

 ul.menu li ul.submenu
 {
   display:none;
 }

 ul.menu li:hover ul.submenu
 {
   display:block;
 }

Answer №2

the snippet of code didn't seem to have any impact on my style sheet

However, after some tinkering, I finally cracked it! Thank you divine intervention!

#navigation ul ul {
    visibility: hidden;
    position: absolute; }

All I did was switch the visibility from 'visible' to 'hidden'

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

Transforming item design in Flexbox when it wraps

Can styles be applied once an item wraps around? I have a two-column flexbox layout where the first item is fixed to the left and the second item should be centered in the remaining space. The solution mentioned here involves adding margin: auto to the se ...

htmlcssflexbox

Removing the navigation button from the hamburger menu

I am working on creating a semi-progressive top navigation bar. For the mobile viewport, the navigation bar will only display the logo and a hamburger button. When the button is clicked, various navigation menu options as well as the Log In and Sign Up bu ...

javascripthtmlcss

What is the functionality of the icon `<i>` in Twitter Bootstrap?

After adding an icon to a webpage, I noticed that it replaced the old, semi-deprecated <i> tag and instead used a customized image tag. It almost seems like <i ...> is just a simpler version of <img ...>. I'm curious about how this ...

htmlcsstwitter-bootstrap

Display a div when hovering over an image using jQuery

I've spent a good 30 minutes searching on Stack Overflow for a solution, but I haven't been able to find it yet. It's possible that I'm not sure what exactly to look for. Essentially, I have a div that contains an image and some text. ...

javascriptjqueryhtmlcss

Steps to make a unique custom tooltip without using jQuery by utilizing the title attribute

I am looking to implement a tooltip similar to the one shown in the image. The value in the title tag is dynamic and fetched from the controller. https://i.sstatic.net/C2v3D.png Below is the code snippet of my table: <table border="1" cellpadding="10" ...

angularjshtmlcss

Easy jQuery image that smoothly fades in and out

Can anyone recommend a script that allows for creating a slideshow where images fade in and out, rather than sliding left and right? I have a list of images below that I would like to use for the slideshow. <ul class="slideshow"> <li><im ...

jquerycssimagefadeoutfadein

Is there a way to attach numerical values to CSS in order to generate a timeline effect?

My goal is to arrange div elements on a timeline based on an array of floats ranging from 0 to 1. The idea is to have the elements positioned along the timeline according to these float values, with 0 representing the beginning and 1 indicating the end. ...

htmlcssangular

The margins within the div of the new tab are not applying as expected

Greetings! Currently, I am in the process of generating a dynamic form within a new tab using JavaScript. For some reason, the margin effects on the div element are not being applied correctly. Despite my attempts to set the margins using both classes and ...

javascripthtmlcss

Align the text vertically within a list item

<ul style="text-align: center;"> <li style="margin: 0; padding-bottom: 23px; font-size: 32px; vertical-align: middle;"> <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px;">[%code1%]</ ...

cssinlinevertical-alignmentlistitem

Event triggered before opening the cell editor in ag-Grid

I'm facing a scenario where I have a grid with rows. When a user double clicks on a cell, a cell editor opens up. There are events associated with the cellEditor - cellEditingStarted and cellEditingStopped, but I need an event that triggers just befor ...

htmlcssangularag-gridtablecelleditor

What is the best way to customize a MaterialUI outlined input using a global theme overrides file?

I've been working on customizing my theme file with overrides, and I've encountered a strange bug while trying to style the outlined input. It seems like there are two borders appearing when these styles are implemented. https://i.stack.imgur.co ...

javascriptcssreactjstypescriptmaterial-ui

Customizing the CSS of the TinyMCE editor within a React application

Incorporating TinyMCE 5 into my React project has been an interesting challenge. I'm looking to personalize the editor by adjusting elements like borders and adding box shadows to the toolbar. Despite attempting to add CSS through the content_css prop ...

javascriptcssreactjstinymce-5

The anchor tag seems to be malfunctioning within the div container

<style type="text/css> .xyz { position: absolute; top: 120px; left: 160px; z-index: -1; } #container { position: relative; overflow: visible; opacity: .3; } </style> <body> <div> <video i ...

javascriptjqueryhtmlcss

The video is not displaying on my website

I recently added a video to my webpage that is 3:48 minutes long. However, even though I have the navigation bar and sound in place, the video does not seem to be displaying properly. Here is an image of how it appears: https://i.stack.imgur.com/HeN41.png ...

htmlcssvideo

Can the navbar brand be centered in Bootstrap 4 while also aligning some text to the left of the brand?

Just dipping my toes into website coding and Bootstrap is a whole new territory for me. I'm struggling with centering the brand in the navbar while keeping the text aligned to the left of it. So far, every attempt results in both elements being center ...

htmlcssbootstrap-4navbarcenter

Is it possible to alter CSS based on the width of the webpage using javascript

We are currently developing a web application that will be deployed on various devices such as mobile phones, iPads, iPhones, and Android. Instead of using user agents to show different views, I prefer having CSS that adjusts based on the screen width. We ...

javascriptjquerycss

Linking a radio button to another mirrored radio button for selection

It should be a straightforward task. I have two sets of radio buttons that mirror each other, known as set A and set B Set A includes buttons 1, 2, and 3 Set B also consists of buttons 1, 2, and 3 The desired behavior is for clicking button 1 in set A t ...

javascripthtmlcss

The HR element seems to be fixed in place and is not moving

I'm having trouble figuring out what's causing the issue, so I wasn't sure how to title it. Any help in looking at the code would be greatly appreciated. Here is the problem: https://i.sstatic.net/b73CA.jpg The HR tag should be positioned ...

htmlcss

The Performance of My Device is Lagging When Executing CSS Transition Effects

I've been working on coding in HTML, but I've encountered an issue where my device seems to struggle with running CSS smoothly. You can take a look at the code I've written on CodePen. html { height: 100%; } body { background: linear ...

javascripthtmlcss

What's the best way to make sure a div container fills in the remaining space between elements?

How can I make the center div take up the remaining space between the left and right divs, without covering them? The contents in the center can overflow hidden if necessary. View my code on jsFiddle HTML <div id=container> <div id=left> ...

htmlcssoverflow