What is the best way to set up the Sub-menu in Fusion Mega Menu to only appear when hovering over it?

I am currently using a Fusion theme for WordPress and trying to replicate the mega menu from the previous website. Take a look at our production site:

Production site

If you hover over "Expertise" and then "Families & Individuals," you will see the sub-menu appear on the right with a line separator.

Now, check out our development site:

Development site

On hovering over "Expertise," all sub-menus are displayed, making the mega menu container too long.

I believe I will need to write some JQuery code to fix the issue with the menu hover effect. But how can I style the menu to display the sub-menu similar to the production site?

Unfortunately, I can't share the code as it is scattered throughout the extensive stylesheet provided by the theme developer.

Do you have any tips, suggestions, or ideas?

ADDED COMMENT/QUESTION: While I managed to use JQuery to show/hide items as intended, I'm struggling to achieve the desired appearance of the sub-menu. Although I can move the sub-menu to the right, I'm having trouble removing the list style to eliminate the arrows. Any thoughts on how to align these two menus?

jqueryhtmlcsswordpressmenu

Answer №1

While I'm not well-versed in the "Fusion" theme, after examining the code provided, it appears that there are significant divergences between the CSS of the original theme and yours. It seems like there are also some JavaScript functions required for your drop-down menu to incorporate "left" and "height" values into the "sub-menu" class.

In your case, the "sub-menu" class is currently set to position: relative;, when it should actually be position: absolute;. There are additional adjustments needed, but I've created a live example to simplify things for you.

As a general recommendation, consider using classes for every 'ul' element (level1, level2, etc.) instead of relying on the ">" selector as demonstrated.

HTML:

<div class="dropdown">
    <ul>
        ... (Rest of the HTML content)
    </ul>
    <div class="white_layer"></div>
</div>    
<img src="http://dev.icsandbox.com/wp-content/uploads/2015/01/Home_CloselyHeld-opt.jpg" />

CSS:

JQuery:

Live Example: http://jsfiddle.net/rnkLoo4x/

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 ensuring responsive images do not cause blocks to jump down

How can we address the issue of blocks jumping after an image loads while still maintaining responsiveness? Codesandbox. Key points to consider: The image should resize when the window is resized. The maximum width of the image is its own width. We do n ...

htmlcss

HTML5 Mouse Canvas

Here's a simple example of what's happening: function handleClick(event) { ... } canvas.addEventListener("click", handleClick, false); function drawRectangle(x, y) { context.fillRect(x, y, 16, 16); }; ...

javascripthtmlcanvas

grab the destination URL from the embedded frame

Thank you for your attention. I am working with three iframes spread across different HTML documents. Here is how they are organized: In the file iframemain.html, there is: <iframe src="iframeparent.html" width="100%" height="600"> </iframe> ...

javascriptjquerymouseclick-event

Ensure that the class is consistently assigned with identical col-md-* and col-lg-* properties across all instances

Bootstrap 5.2 is my framework of choice for targeting github pages, and here is a snippet of my code: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...

htmlcsstwitter-bootstrapbootstrap-5

Tips for positioning text underneath an image with HTML and CSS

I'm attempting to align two links below an image as text. The HTML I have works perfectly in Chrome and Firefox, but not in IE, where 90% of our internal users are. Here is the code: <div style="float: right;"><img src="sites/default/files/ ...

htmlcssdrupaldrupal-7

Adjust the size of the text within the div element as needed

Here is my code on jsFiddle where I am dynamically changing the text font to fit in the div. Everything is working perfectly fine. Currently, the text is within a span element, but I would like to remove the span and have the same functionality. However, w ...

javascriptjqueryhtmlcss

Customize the Address Bar with Google Extension

I recently developed a unique Chrome extension that modifies the appearance of the new tab page by incorporating my site's index.html. However, I am facing an issue where the address bar displays https://example.com/index.html/. Is there a way to have ...

javascripthtmlgoogle-chromegoogle-chrome-extension

Utilize the ajax error function in MVC5 API2 to fetch and display a customized error message in the

I am working with an API2 controller in MVC5 to implement CRUD operations. In the POST method, I have an if statement that returns a BadRequest() when the result of the IF statement is false. [HttpPost] public IHttpActionResult CreateAllowance(Allowan ...

jqueryajaxapiasp.net-mvc-5

What could be causing this jQuery selector to not select any elements?

Here's a simple question with some code that needs troubleshooting: $insides = $('<thead><tr><th><!--Blank space --></th></tr></thead><tbody><tr class="green-row"><td>Opportunities to D ...

javascriptjqueryhtmldom

What is the best way to access a specific attribute of an HTML element?

Within my ng-repeat loop, I have set a custom attribute like this: <div ng-repeat="item in itemsList" stepType="{{item.stepType}}"> {{item.itemValue}} </div> The possible values for item.stepType are 'task' or 'action ...

javascriptjqueryhtmlangularjsangularjs-ng-repeat

One method for activating a second Select>Option with the use of a first Select>Option in an HTML form

In my HTML/PHP form, I aim to create two dropdown lists. The first one should be constantly visible, and depending on the selection made in it, a second dropdown list should be revealed. Although I attempted the code below to test the functionality, the s ...

phphtml

Innovative Modal - the secret to triggering a modal without using a button

I came across this amazing script that offers incredible modal transitions which I am eager to implement instead of the traditional alert message. Although the demo shows how to trigger the modals by clicking a <button>, I am struggling to figure ou ...

jquerybuttontriggersnifty-modal

Is there a way to submit a PUT method form in Laravel seamlessly without having to refresh the page?

Below is the HTML form code used in my Laravel application: <button onclick="submitForm()">submit form using jquery ajax</button> <form name="fbCommentCountform" action="{{ route('blogs.update', ['id'=>$id]) }}"> ...

javascriptjqueryajaxformslaravel

Transforming the Bootstrap 3 Carousel into a fixed image with overlaying sliding text

I am interested in creating a Carousel that features a single static image with text sliding over it, instead of multiple images changing with the text. For example, when clicking the next slide button, only the text will move while the image remains stat ...

csstwitter-bootstrap

show the text input within a span element, encountering issues with its width

My goal is to create an input text field that looks exactly like a span element. I want the user to be able to enter text without realizing they are typing in a field. I have made some progress, but the main issue now is with the width of the input field. ...

css

Having trouble retrieving information from ajax to php

I'm struggling to understand why this code is not functioning as expected: idcurso= res[0]; idusuario= res[1]; semana= res[2]; fecha=res[3]; asistencia= true; $.ajax({ type: "POST", url: '/test/7/tomarasistencia.php', data: { ...

javascriptphpjqueryajax

Stylish Pop-up Box appears hidden behind a different element

Is there a way to fix the issue of the FancyBox plugin being blocked by some part of the HTML on the page when trying to load a Vimeo movie into a popup? Here is the live link: click here : it's when you click on the slider image underneath the yello ...

jqueryhtmlcssfancyboxfancybox-2

How to accurately determine the event.target for parent elements in JavaScript?

Firstly, I am utilizing pure vanilla javascript without any frameworks involved. My goal is to set up a click event listener on an element that is not yet present. In order to do so, I am following this approach (assuming parentElement is already availa ...

javascriptjquery

What is the significance of the "#" character in the URL of a jQuery mobile

As I encounter a strange issue with my jQuery mobile page, I notice that when accessing page.php everything looks good, but once adding #someDetailsHere to the URL, it only displays a blank white page. What could be causing this and how can I resolve it? ...

javascriptjquerymobile

Deactivate the submission button when there are no search results in typeahead.js

How can I disable the submit button if there are no search results found? The form should not be submitted in this scenario. I am currently using typeahead.js for my code. $('.typeahead').typeahead(null, { name: 'suburb', disp ...

javascriptjquerytypeahead.js