`Unable to locate Dropdown Menu Element`

Currently, I am in the process of developing a website that utilizes a series of images as a navigation menu. While I managed to successfully implement a dropdown (slideout) menu on one side, the other side fails to display the menu upon mouseOver interaction.

Despite both sides being identical, my thorough code review for the past hour has not pinpointed the source of the issue.

If you'd like to take a look at the code, here is the jsFiddle.

Thank you for your assistance :)

* {
    box-sizing: border-box;
}

h1 {
    font-size: 50px;
    color: aliceblue
}
.topbar{
    margin-top: 0px;
   ...
</html>

htmlcssdrop-down-menuhoverdisplay

Answer №1

There is an error in your CSS code. You are using the + selector instead of >.

* {
    box-sizing: border-box;
}

h1 {
    font-size: 50px;
    color: aliceblue
}

.topbar {
    margin-top: 0px;
    padding: 1px;
    background-color: #605E5E;
    border-bottom-style: inset;
    border-bottom-color: #888888;
}

.touch-menu {
    /* Gradient colors edited at: https://colorzilla.com/gradient-editor/#eda954+0,e5933b+29,e59f54+56,e89230+79,e89230+91,e89230+100 */
    background: rgb(237, 169, 84); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(237, 169, 84, 1) 0%, rgba(229, 147, 59, 1) 29%, rgba(229, 159, 84, 1) 56%, rgba(232, 146, 48, 1) 79%, rgba(232, 146, 48, 1) 91%, rgba(232, 146, 48, 1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(237, 169, 84, 1) 0%, rgba(229, 147, 59, 1) 29%, rgba(229, 159, 84, 1) 56%, rgba(232, 146, 48, 1) 79%, rgba(232, 146, 48, 1) 91%, rgba(232, 146, 48, 1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(237, 169, 84, 1) 0%, rgba(229, 147, 59, 1) 29%, rgba(229, 159, 84, 1) 56%, rgba(232, 146, 48, 1) 79%, rgba(232, 146, 48, 1) 91%, rgba(232, 146, 48, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eda954', endColorstr='#e89230', GradientType=0); /* IE6-9 */
    display: flex;
    padding: 10px;
}

ul {
    text-align: center;
    list-style-type: none;
    margin: 10px;
    vertical-align: middle;
}

.slideout-content-top-left, .slideout-content-bottom-left {
    display: none;
    height: 95%;
    margin: 10px 0px 10px 0px;
    min-width: 16px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    background-color: #736E6F;
    z-index: 1;
}

.slideout-content-top-right, .slideout-content-bottom-right {
    display: none;
    height: 95%;
    margin: 10px 10px 10px 0px;
    background-color: #736E6F;
    min-width: 16px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    vertical-align: middle;
}


.menu-top-right:hover > .slideout-content-top-right, .menu-bottom-right:hover > .slideout-content-bottom-right {
    display: inline-block;
}

.slideout-content-bottom-right:hover, .slideout-content-top-right:hover {
    display: inline-block;
}

.menu-top-left:hover > .slideout-content-top-left, .menu-bottom-left:hover > .slideout-content-bottom-left {
    display: inline-block;
}

.slideout-content-bottom-left:hover, .slideout-content-bottom-left:hover {
    display: inline-block;
}


.touch-menu img:hover {
    filter: brightness(1.25);
}

.column {
    flex: 50%;
    display: flex;
    flex-direction: column;
    vertical-align: middle;
}

.menu-top-left, .menu-bottom-left, .menu-bottom-right, .menu-top-right {
    flex: 50%;
    height: 100%;
}


.menu-bottom-left img, .menu-top-left img {
    width: 50%;
    height: 95%;
    float: right;
    margin: 10px 10px 10px 0px;
}

.menu-bottom-right img, .menu-top-right img {
    width: 50%;
    height: 95%;
    float: left;
    margin: 10px 0px 10px 10px;
}

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 showcase an icon within a select options tag

Is there a way to show Font Awesome icons in select options tag? I have tried using it outside like this <i class="fas fa-chart-pie"></i> But I'm not sure how to display it within the <option> tags instead of text. <select id="s ...

htmljquerycssbootstrap-4html-select

error displays stating that the module '../util/http_util' cannot be located

I'm currently using node and Notepad++ to develop a website that allows users to log in, save their details, and access the site. I've encountered an issue that I can't quite figure out even though everything seems fine in the code. Below yo ...

javascripthtmlnode.jsnpm

From structured CSS to streamlined LESS syntax

Being a UX designer, my goal is to streamline my workflow. I aim to transition from HTML to well-structured CSS to LESS as efficiently as possible. The concept is to input HTML, generate CSS, compile it to LESS, style it, and then recompile it back to CSS ...

htmlcssgeneratorless

Issue with React select dropdown not properly updating selected value

My website has a form with the default value of ethExperienceLevel set to "BEGINNER". I have a function that is supposed to update the selected state when switching between options in a dropdown list, triggered by an onChange handler. However, I noticed ...

javascripthtmlreactjstypescriptnext.js

A step-by-step guide on modifying the box-shadow color using jquery

I have developed some JavaScript code that adjusts the box-shadow of buttons to be a darker version of their background color. This allows users to dynamically change the button background colors. The current code successfully changes the box shadow based ...

javascriptjquerycss

How can you specifically target the initial row of a CSS grid using Tailwind?

Currently in my vue application, I have a loop set up like this: <div class="grid grid-cols-3 gap-14"> <article-card v-for="(article, index) in articles" :key="index" :content="article" /> </div> ...

cssvue.jstailwind-css

Scraping HTML data without <div> tags with Scrapy - how to do it?

After spending hours attempting to extract a specific data set for use with Scrapy in a web scraping project, here is the current python code: bedrooms_info = house_listing.css( '.search-results-listings-list__item-description__charact ...

pythonhtmlweb-scrapingscrapy

Using CSS flex with a column layout that does not expand to the full width of its parent

My vertical navigation bar includes the following list items: <ul class="nav"> <li> <div> <i class="fa fa-tachometer"></i> <a href="#" class="noselect">Dashboard</a> </div> ...

htmlcssflexbox

Personalized map pin styling

Currently, I am following a tutorial on this link: http://jsfiddle.net/doktormolle/jcHqt/. However, the rendering of the marker is not up to par, especially when using my own custom marker as it appears quite pixelated. I am looking for assistance in ach ...

javascriptcssgoogle-mapsgoogle-maps-api-3sass

Is it necessary to reset (local storage, session storage) once the countdown timer reaches zero?

I have successfully implemented a countdown timer using session storage in my code. However, I am looking to enhance its functionality further by: Clearing the local session if the user leaves the site before the countdown timer finishes. Automatically c ...

javascripthtmltimerlocal-storage

Is there a way for me to instruct jQuery to revert an element back to its initial value, prior to any dynamic alterations?

My question is regarding changing the content of a div using the `html()` method in JavaScript. I am currently working on implementing a "cancel" button and would like to revert the content back to its original value without having to completely reset it w ...

javascriptjqueryhtml

Adjusting the width of images in Bootstrap is proving to be a challenge

Check out this website. There is an advertisement image below the navigation bar. I am having trouble adjusting its width. I want the image to expand and fill the empty white space. I've attempted using relative and absolute positioning, but the width ...

htmlcsstwitter-bootstrap

Creating the perfect layout with CSS: A step-by-step guide

As I work on refining my layout to achieve the desired look, let me share my initial idea before delving into the issue at hand. Currently, I am attempting to create something similar to this: https://i.stack.imgur.com/rtXwm.png This is how it appears a ...

htmlcss

What is the best way to apply CSS styles to different states in React?

I am endeavoring to adjust the size of an element by utilizing this code snippet. const [size, setSize] = useState({}); The initial size I wish to set is: transform: scale(1, 1) translate3d(0, 0, 0); Upon clicking on the element, my aim is to enlarge it ...

cssreactjsstate

Merge multiple echoes to create a single echoed string that is valid HTML

<?php // link to Google Docs spreadsheet $url='https://docs.google.com/spreadsheets/d/1_4d-MPxTUOVZbxTOlhjXv1ebTlBPQ-_JrYUlS1rqX5Q/pub?output=csv'; // open file for reading if (($handle = fopen($url, "r")) !== FALSE) { while (($data = fge ...

phphtml

Tips for dynamically passing a string into a Javascript function

Here is a JavaScript function that I have: function doIt(link) { alert(link); } I am using this function in the following JavaScript code snippet. Here, I am dynamically creating an anchor tag and appending it to my HTML page: jQuery.each(data, func ...

javascriptjqueryhtml

Different styles of Unicode arrowheads found on different versions of Android devices

Here is the HTML/CSS code I'm using to create a "Play" button with an arrowhead symbol. The code utilizes ▶ and &9658; to achieve this functionality. <div class='audio-container'> <p style="text-indent:0em;"> <aud ...

androidhtmlcss

What is the process for displaying the save file dialog in Safari?

I'm struggling with generating a PDF and saving it as a file in Safari using an Angular app and DocRaptor. I've tried various methods from Stack Overflow, but none seem to trigger the save file dialog. Instead, they either open the file in the cu ...

javascriptangularjshtmlsafaripdf-generation

"Delving into the world of JTidy node management

I am currently utilizing JTidy to extract information from web pages. My inquiry is as follows: Is it feasible to execute the XPath.evalate method on a node that has already been obtained? Let me provide further clarification. Typically, you would utiliz ...

htmlxmlparsingjtidy

Default display as collapsible. Prefer them to be concealed initially

Looking for help with creating collapsible buttons. Currently, they show and collapse onclick, but I want them to be hidden by default. This is part of a personal website project where I am teaching myself HTML. What do I need to change? I tried using butt ...

javascripthtmlcss