Troubleshoot: Issue with Multilevel Dropdown Menu Functionality

Check out the menu at this link:

The issue lies with the dropdown functionality, which is a result of WordPress's auto-generated code.

Css:

.menu-tophorizontalmenu-container {
    margin: 18px auto 21px;
    overflow: hidden;
    width: 1005px;
    display: block;
}

    .menu {
        list-style: none;
        margin: 0 auto;
        padding: 0;
    }

    .menu * {
        margin: 0;
        padding: 0;
    }

        .menu a {
            display: block;
            color: #fff;
            padding: 6px 16px;
            background: #000;
        }

        .menu li {
            position: relative;
            float: left;
            font-size: 18px;
            margin: 2px 2px 0 0;
            text-transform: uppercase;
        }

            .menu ul {
                position: absolute;
                top: 33px;
                left: 0;
                background: #000;
                display: none;
                list-style: none;
                z-index: 999px;
            }

                .menu ul li {
                    position: relative;
                    display: block;
                    width: 257px;
                    margin: 0 0 2px 0;
                    padding: 0;
                }

                    .menu ul li a {
                        display: block;
                        padding: 6px 16px;
                        color: #fff;
                        background: #000;
                    }

                    .menu ul li a:hover {
                        background: #1191B7;
                        color: #000;
                    }

                        .menu ul ul {
                            left: 257px;
                            top: 0;
                        }

                        .menu .menulink {

                        }

                        .menu .sub {
                            background: url(img/arrow-left.jpg) no-repeat 136px 8px;
                        }

If I remove the slideshow below the menu, it functions properly.

There is also JavaScript involved:

function mainmenu(){$(" #menu-tophorizontalmenu ul ").css({display: "none"}); // Opera Fix $(" #menu-tophorizontalmenu li").hover(function(){
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
    },function(){
    $(this).find('ul:first').css({visibility: "hidden"});
    });} $(document).ready(function(){                  
mainmenu();});

Furthermore, there is an issue with the arrow placement... The arrow should only appear when there is a child menu present.

Any suggestions or solutions?

javascriptjquerycssmenudrop-down-menu

Answer №1

visibility: "visible",display: "none"

This might seem contradictory. Simply use display:none; to hide something and display:block; to show it.

It's difficult to connect this with your code because the jQuery is showing an error message:

No elements were found with the selector: "ul:first"

Update (@11:07 GMT):

I have added some extra HTML and jQuery examples - view jsfiddle

HTML:

<div class="menu-tophorizontalmenu-container">
  <ul id="menu-tophorizontalmenu" class="menu">
    <li id="menu-item-36" class="menu-item menu-item-type-custom menu-item-home menu-item-36">
      <a href="http://voteacnng.org">Homepage</a>   
      <div style="display:none;">
        <p>I am a</p>
        <p>menu item</p>
        <p>can you see?</p>
      </div>
    </li>
    // Other menu items
    <li>...</li>
  </ul>
</div>

jQuery:

$("#menu-item-36").hover(function(){
    $("#menu-item-36").find("div").attr('style', 'display:block;');
    $(this).mouseout(function(){
        $("#menu-item-36").find("div").attr('style', 'display:none;');
    });
});

I included <div /> and <p />s because your CSS isn't displaying <ul />s correctly. Consider using this as a starting point and organizing your HTML and CSS properly with <ul>s and <li>s.

I hope this information helps.

Answer №2

When it comes to arrow styling:

$("#menu-tophorizontalmenu ul").closest('li').find('a').prepend('>>');

Answer №3

Present circumstances:

The arrows are functioning smoothly, all thanks to the genius of @experimentX. Additionally, we have successfully resolved the issue with the dropdowns, credits to none other than @Alex Thomas.

I made an interesting discovery. It appears that there is a particular class defined as follows:

.TopHorizontalMenu {
        margin: 18px auto 21px;
        overflow: hidden;
        width: 1005px;
        display: block;
    }

If I were to eliminate the overflow property, the dropdowns would function properly but it would cause the slideshow to shift to the top right corner of the page. I believe we require an alternative solution for this matter.

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

Ways to Halt observable.timer in Angular 2

As I work on Angular2's Component, I am currently implementing the following functions: export class MypageEditComponent { ngOnInit() { this.timer = Observable.timer(100, 100); this.timer.subscribe(t => { this.setFormData(); } ...

javascriptangulartypescriptrxjsrxjs5

Mapping data visually

Currently, I am in the midst of a vuejs project where I aim to create data visualizations on a map. My goal is to showcase a world map with percentages representing each country. However, I find myself at a loss on how to begin this task. Are there any r ...

javascriptvue.jsstatisticsdata-visualization

Instructions for compiling node-sass within the present directory for specific files

In my project, the directory structure looks like this: - folder1 - styles1.scss - folder2 - styles2.scss I want to utilize node-sass through the command line to generate the following output: - folder1 - styles1.scss - styles1.css - folder2 ...

cssnpmsassnode-sass

SVG padding will only take effect if two or more sides are specified

What is the reason behind an SVG requiring at least 2 areas to be padded for padding to apply? For instance, applying padding-top: 50px to an svg element will have no effect. However, adding padding-top: 50px; padding-left: 1px will result in the padding ...

csssvg

Tips on converting deeply nested JSON into an excel file using Node.js

I am attempting to convert the JSON data below into an Excel file using XLSX. Although it successfully converts my JSON to Excel, I encountered an issue where the nested array of dailyPointsArray appears blank after conversion. Code Attempted const XLSX ...

javascriptnode.jsexcelexpressxlsx

Tips for transferring data via ajax to rails 3. The jQuery function is ensuring the string is properly handled

I am attempting to achieve the following: $.ajax({ type: "PUT", url: /example, data: {_method: "put", "foo_model[bar_attribute]": value_var } }); It is working as expected, but I need to dynamically construct the part foo_model[bar_attribute]. ...

javascriptjqueryruby-on-railsajaxjson

Tips for assigning a Custom Formik Component's value to the Formik value

I'm currently integrating Formik into my form alongside Google Places auto-complete feature. My goal is to display the places auto-complete functionality as a custom component within the Formik field. form.js <Formik initialValues={location:" ...

javascriptreactjsformsformikgoogle-places-autocomplete

Styling CSS: Create circular images with dynamic text positioning or resizing on screens larger than 768px

I'm struggling to figure out how to create a circular profile picture on a background image that remains responsive and maintains its position across different screen sizes. Currently, I've been using fixed margin values to adjust the position, ...

cssresponsive-designbootstrap-4

Displaying a JSON array response on an HTML page with JavaScript and jQuery

After receiving a JSON response with data in array format, I need to display that data on an HTML page. In my HTML structure, I have div elements for merchant name, product name, and a remove button. The JSON data consists of arrays containing the same pro ...

javascriptjqueryhtmljson

Trouble with Google Interactive Charts failing to load after UpdatePanel refresh

Desperately seeking assistance! I have spent countless hours researching this issue but have hit a dead end. My dilemma involves using the Google Interactive Charts API within an UpdatePanel to dynamically update data based on dropdown selection changes. H ...

javascriptasp.netajaxupdatepanelgoogle-visualization

Unable to set selected property in React Material-UI menu item

One issue I'm facing is setting the selected prop using react mui menu item. In a multiple select menu list, there's a field called allValues that, when clicked, should toggle the selection of all menu items. The code for this functionality looks ...

javascriptreactjsmaterial-ui

Javascript's second element does not trigger a click event with similar behavior

I'm currently facing an issue with displaying and hiding notification elements based on user interaction. My goal is to have multiple popup elements appear when the page loads. Then, when a user clicks the ".alert-close" element within one of the popu ...

javascriptjqueryhtmlcss

Enhancing user experience with VideoJS player overlay buttons on mobile devices

I am currently using VideoJs player version 4.2. When I launch a videojs player on Safari browser in an iOS device, it defaults to native controls. However, when I pause the player, overlay buttons (links to navigate to other pages) are displayed on the v ...

javascriptjqueryioshtml5-videovideo.js

Host app is failing to render shared components in SSR

Encountering an issue while implementing SSR with module federation? Check out my code example Steps to Begin: Run yarn install:all command Execute yarn shell:server:build task Start the server using yarn shell:server:start Initiate remote services with y ...

javascriptangularwebpackwebpack-module-federation

What exactly are Node.js core files?

I recently set up my Node.js application directory and noticed a presence of several core.* files. I am curious about their purpose - can these files be safely removed? The setup involves installing Node.js alongside Apache using mod_proxy to host one of ...

javascriptnode.js

What is the best way to display text from a header box across multiple line boxes in real time on an HTML page?

Looking to enhance an HTML layout with a header box and line comment boxes. <textarea name="order[header_comments]"></textarea> The line comment boxes are structured as follows: <textarea name="line_comments[0][line_comments]"></tex ...

javascriptjqueryhtmljquery-selectors

When using `npm publish`, any files located within the `node_modules

After developing an npm package, I included some modules in the node_modules directory to make them accessible as "modules". For instance, I have a module called my-module.js in node_modules which I require in my code using require('my-module'). ...

javascriptnode.jsnpmpackage

An error occurred: TypeError - Unable to access the 'value' property of a null object during a value change

Example ImageCreating a dynamic form where rows and select box options are added dynamically using 'x' and 'i' increment values in two JavaScript functions. The code works fine when the option selected is 0.5, but throws an error Uncaug ...

javascriptjqueryhtml

Strange duplication of post request in Sitefinity

I'm dealing with a peculiar issue. Imagine having two identical forms or widgets on the same webpage. Here is the code for the form: <form> <input class="form-group" type="text" title="FirstName" name="FirstName" id="FirstName" /><br ...

c#jqueryajaxasp.net-mvcsitefinity

Display a message if the local storage is empty

Recently, I came across a javascript code snippet that is designed to save birthday data in local storage and then display the data within a div element. The current functionality only shows nothing if the storage is empty. However, I require it to display ...

javascriptjson