The menu dropdown vanishes and the navigation links are no longer visible

I'm currently in the process of designing a custom menu with drop-downs, but I've run into some issues. Strangely enough, everything works perfectly in my fiddle, but when implemented on the actual website, it's not functioning properly. I'm having trouble pinpointing the cause of these errors.

For reference, here is the link to the website:

Below is the code snippet that I have constructed:

HTML:

<div id="nav_menu-12" class="et_pb_widget widget_nav_menu">
<div class="menu-logged-in-container">
    <ul id="menu-logged-in" class="menu">                
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1483">
            <a href="http://94co.com/client3/domaine-de-gourjo/">Domaine de Gourjo</a>
                <ul class="sub-menu">
                    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1403"><a href="/client3/about/#the-castle">The Castle</a></li>
                       <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1404"><a href="/client3/about/#the-vineyard">The Vineyard</a></li>
                        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1405"><a href="/client3/about/#a-family-history">A Family History</a></li>
                </ul>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1487"><a href="http://94co.com/client3/wines/">Our Wines</a>
            <ul class="sub-menu">
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1498"><a href="/client3/wines/#domaine-gourjo-link">Domaines Wines</a></li>
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1497"><a href="/client3/wines/#gourjo-link">Gourjo</a></li>
            </ul>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1401"><a href="http://94co.com/client3/store/">eCellar</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1629"><a href="http://94co.com/client3/gorgeous-mag/">Gorgeous Mag</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1402"><a href="http://94co.com/client3/contact-us/">Contact</a></li>
    </ul>
</div>

CSS:

#menu-logged-in li ul { position: absolute; top: 30px; left: -27px; padding: 20px; }
#menu-logged-in li ul { z-index: 9999; width: 100% !important; padding-left: 10px !important; background: none; visibility: hidden; opacity: 0; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
#menu-logged-in li:hover > ul { opacity: 1; visibility: visible; }
#menu-logged-in li li { padding: 0;font-size:14px;margin-left: 20px; width:170px;}
#menu-logged-in li li ul { z-index: 1000; top: -3px; left: 220px; }
#menu-logged-in li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }
.nav li li a, .et_mobile_menu li a { font-size: 14px; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
#menu-logged-in ul li a:hover { color: #ff0000; }
#menu-logged-in li a:hover { color: #ff0000; }
#menu-logged-in li.current-menu-item > a {
color: #b7b7b7 !important;
}

#menu-logged-in .menu-item-has-children > a:first-child:after {
content: ' ';
}

#menu-logged-in li {
display: inline-block;
font-size: 20px;
color:#a0a0a0;
position: relative; 
padding: 0 35px 0 35px; 
text-align: center;
}

Here is the corresponding fiddle for this issue: http://jsfiddle.net/elitedesignstudios/wR7PN/

If anyone could assist in troubleshooting and resolving this matter, I would greatly appreciate it.

htmlcsswordpress

Answer №1

I'm not sure what's happening, but you seem to have a div that is overlapping the sub-menus.

HTML

<div class="et_pb_row">
<div class="et_pb_column et_pb_column_4_4">
<hr class="et_pb_space" style="height:150px;">
</div> <!-- .et_pb_column -->
</div>

CSS

.et_pb_row {
width: 1080px;
margin: 0 auto;
padding: 30px 0 0 0;
position: relative;
z-index: 2;
}

If you take out the z-index property, the menu should work correctly.

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

There seems to be an issue with Bootstrap not condensing into two columns properly on mobile devices

I need help figuring out how to turn a row of 4 images into two columns on tablet and mobile devices. Currently, they are stacking in a single column instead of forming two columns. Basically, I want the images to adjust and display in two columns when vi ...

htmlcsstwitter-bootstrapbootstrap-4

Using `ng-hide` to conceal information upon clicking the submit button

Is there a way to hide the date entry when the user submits their own date instead of showing it on the page? I attempted using the AngularJS directive "ng-hide" with a class and setting it to hide the element, but it doesn't seem to work in conjuncti ...

javascripthtmlangularjs

Animation not properly synced with Bootstrap 4 Dropdown hide event

Could you please check out my codepen for clarification: http://codepen.io/anon/pen/oLZOyp Essentially, I have integrated two animations using animate.css into Bootstrap 4 show.bs.dropdown and hide.bs.dropdown events. The animations work on the first show. ...

javascriptjqueryhtmlcsstwitter-bootstrap

Enhance your view of the iFrame's CONTENT by zooming in

I'm attempting to magnify (without altering the dimensions) an iFrame containing a SWF file. <iframe src="http://ray.eltania.net/TEST/swf-play/swf/testMotion.swf" width="600px" height="500px" frameBorder="0"></iframe> http://jsfiddle.net ...

jqueryhtmlflashzooming

Display a petite popup above the selected text within the Code Mirror editor

I have been utilizing the following code snippet to highlight text segments in Codemirror, a renowned code editor and syntax highlighter that can be downloaded from this link. Despite referring to the documentation, I am still unable to grasp how this fun ...

htmljquerycsscodemirror

Determining the visibility of an element on a webpage using JavaScript and Puppeteer

I've created a framework that scans websites hosted on our servers to ensure they comply with our policies. If any prohibited content is found, we capture a screenshot along with other relevant details. However, taking a screenshot may not be possibl ...

javascriptjqueryhtmlnode.jspuppeteer

Tips for locating text enclosed by unique characters within a string and converting it to superscript

I need assistance with formatting the following title: test ^TM^ title test. My goal is to convert this text so that the word enclosed between '^' appears as superscript without altering its position, like the example below. testTMtitle test Yo ...

javascriptjqueryhtml

"Looping through a list but skipping over a certain element in

Currently, I am utilizing AngularJS to display multiple elements in my HTML code. While Angular is successfully repeating the divs as intended, there seems to be an issue when trying to repeat a specific div. More details provided below: <tr ng-repeat= ...

javascripthtmlangularjsangular-template

Incorporating an external JavaScript file into an AngularJS project

index.html: <!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script> <script src="./assets/namesController.js"></script> <body ng-app="myApp"> < ...

javascripthtmlangularjs

Can you explain the intended function of .reference in the CSS code provided?

Currently delving into some sample HTML from codrops. I came across the following CSS styling. After scouring the web, it seems others have used span.reference, but I can't seem to grasp the purpose of .reference. Any insights would be much appreciat ...

cssmenu

Shifting the Ion Menu side dynamically based on screen size: A step-by-step guide

Working with Ionic 4, I encountered the need to dynamically change the side property of ion-menu. On larger screens, ion-menu is always visible or static, whereas on smaller screens, it remains hidden until the user clicks on the ion-menu-button. My goal i ...

htmlangulartypescriptionic-framework

"Which is better for handling form data: using $.ajax with hidden fields or PHP form

Creating a streamlined admin tool using PHP and JQuery to handle image data management is my current project. The main goal of this utility is to enable an admin to retrieve images from a database, view associated tags for each image, and add new tags as n ...

javascriptphpjqueryhtmlajax

In Internet Explorer 8, the Radmenu hover menu may appear below surrounding Radmenus

Utilizing a radmenu, I am able to dynamically generate a submenu structure by examining folders in sharepoint document libraries. However, when placing multiple controls on the page, the root menu from other controls overlaps with the submenu of the curren ...

htmlcssinternet-explorertelerik

Is it possible for image.src to pose a security threat?

Here is the code snippet I am working with: var image = new Image(); image.src = "https://MyTrackingSite.com/?myTrackingParameter=whatever" I noticed that the image is not added to the DOM tree. Is it still rendered by the command "image.src"? Could this ...

javascripthtml

The CSS for selecting the input[type="submit"] element is not functioning as expected

I apologize but I am encountering an issue with my .css stylesheet that covers styles for my input type buttons as shown below. input[type="submit"] input[type="submit"]:hover input[type="submit"]:focus The first three selectors are functioning well, how ...

cssbuttonsubmitonselect

Trouble with find_element_by_xpath in Python's headless mode

When using selenium with python, the code snippet below functions correctly in non headless mode. However, upon switching to headless mode, an error is encountered: raise exception_class(message, screen, stacktrace) selenium.common.exceptions.NoSuchElement ...

pythonhtmlseleniumgoogle-chrome

How can I remove the div container every time the submit button is clicked?

I am currently working on a form that is capturing values as shown below. <form role="form" id="calculate"> <div class="form-group"> <select class="form-control" id="paper"> < ...

javascripthtmlcss

The request made to `http://localhost:3000/auth/signin` returned a 404 error, indicating that

My goal is to access the signin.js file using the path http://localhost:3000/auth/signin Below is my code from [...nextauth].js file: import NextAuth from "next-auth" import Provider from "next-auth/providers/google" export default N ...

javascripthtmlfirebasenext.jsnext-auth

Overriding table styling with Bootstrap in a custom stylesheet

Recently, I made the switch from bootstrap v4 to v5 and I am in the process of identifying and fixing any issues that may have arisen. One particular issue that I am stuck on is the <th> tag not displaying correctly in the table. It seems like my tab ...

htmlcsstwitter-bootstrapbootstrap-5

Ways to conceal CSS on the page when triggering a different element

I am trying to achieve the functionality of hiding the black arrow when clicking on the green arrow, all without using jQuery. Here is my fiddle: http://jsfiddle.net/t5Nf8/195/ html: <div class="arrow-down"></div> <div class="arrow-up"> ...

javascriptcss