Although the CSS3 Mobile Multilevel Menu is functioning, it is currently unable to display the second level of the

Hi there! I am currently working on a CSS3 vertical menu for a mobile webpage. While the first level of the menu is functioning correctly, the same cannot be said for the second level. It seems to always show up on mouseover, despite my numerous attempts to fix it.

Although I am not an expert in CSS3 or HTML, I believe that I must be overlooking something crucial.

The HTML code snippet is as follows:

@media only screen and (max-width : 640px) {

 /* ---------------------------------------------
     Mobile Menu 
    --------------------------------------------- */
    .m-menu {
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }

    .m-menu li { list-style: none; }

    .m-menu li a {
        display: table;
        margin-top: 1px;
        padding: 14px 10px;
        width: 100%;
        background: #78BE20;
        text-decoration: none;
        text-align: left;
        vertical-align: middle;
        color: #fff;
        overflow: hidden;
        -webkit-transition-property: background;
        -webkit-transition-duration: 0.4s;
        -webkit-transition-timing-function: ease-out;
        transition-property: background;
        transition-duration: 0.4s;
        transition-timing-function: ease-out;
    }

    .m-menu > li:first-child a { margin-top: 0; }


    .m-menu li a:hover {
        background: #555555;
        -webkit-transition-property: background;
        -webkit-transition-duration: 0.2s;
        -webkit-transition-timing-function: ease-out;
        transition-property: background;
        transition-duration: 0.2s;
        transition-timing-function: ease-out;
    }

    .m-menu li ul {
        margin: 0;
        padding: 0;
    }

    .m-menu li li a {
        display: block;
        margin-top: 0;
        padding: 0 10px;
        height: 0;
        background: #EEEEEE;
        color: #515151;
        -webkit-transition-property: all;
        -webkit-transition-duration: 0.5s;
        -webkit-transition-timing-function: ease-out;
        transition-property: all;
        transition-duration: 0.5s;
        transition-timing-function: ease-out;
    }

    .m-menu > li:hover li a {
        display: table;
        margin-top: 1px;
        padding: 10px;
        width: 100%;
        height: 1em;
        -webkit-transition-property: all;
        -webkit-transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-property: all;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
    }

    .m-menu > li:hover li a:hover {
        background: #E7E7E7;
        -webkit-transition-property: background;
        -webkit-transition-duration: 0.2s;
        -webkit-transition-timing-function: ease-out;
        transition-property: background;
        transition-duration: 0.2s;
        transition-timing-function: ease-out;
    }
    
    /* Second level  */
   .m-menu > li > li:hover li a {
        display: table;
        margin-top: 1px;
        padding: 10px;
        width: 100%;
        height: 1em;
        -webkit-transition-property: all;
        -webkit-transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-property: all;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
    }

}
<ul class="m-menu">
    <li> <a href="#">MENU VOICE</a>
        <ul>
            <li><a href="#">FIRST LEVEL ITEM 1</a></li>
            <li><a href="#">FIRST LEVEL ITEM 2</a></li>
            <li>
                <a href="#">FIRST LEVEL ITEM 3</a>
                <ul>
                    <li><a href="#">SECOND LEVEL ITEM 1</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Many thanks in advance for any assistance you can provide.

Sincerely, Chris

htmlcssmobilemenu

Answer №1

There are just a few minor issues in the hierarchy:

.m-menu > li:hover li a is selecting all anchor tags under list items (including nested ones). To target only the first level, use: 

.m-menu > li:hover > ul > li > a
. Also, 
.m-menu > li > li:hover li a
is missing the parent ul of the third level item: 
.m-menu > li > ul > li:hover li a

edit: I have also removed the media query to ensure proper rendering on desktop.

 /* ---------------------------------------------
     Mobile Menu 
    --------------------------------------------- */
    .m-menu {
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }

    .m-menu li { list-style: none; }

    .m-menu li a {
        display: table;
        margin-top: 1px;
        padding: 14px 10px;
        width: 100%;
        background: #78BE20;
        text-decoration: none;
        text-align: left;
        vertical-align: middle;
        color: #fff;
        overflow: hidden;
        -webkit-transition-property: background;
        -webkit-transition-duration: 0.4s;
        -webkit-transition-timing-function: ease-out;
        transition-property: background;
        transition-duration: 0.4s;
        transition-timing-function: ease-out;
    }

    .m-menu > li:first-child a { margin-top: 0; }


    .m-menu li a:hover {
        background: #555555;
        -webkit-transition-property: background;
        -webkit-transition-duration: 0.2s;
        -webkit-transition-timing-function: ease-out;
        transition-property: background;
        transition-duration: 0.2s;
        transition-timing-function: ease-out;
    }

    .m-menu li ul {
        margin: 0;
        padding: 0;
    }

    .m-menu li li a {
        display: block;
        margin-top: 0;
        padding: 0 10px;
        height: 0;
        background: #EEEEEE;
        color: #515151;
        -webkit-transition-property: all;
        -webkit-transition-duration: 0.5s;
        -webkit-transition-timing-function: ease-out;
        transition-property: all;
        transition-duration: 0.5s;
        transition-timing-function: ease-out;
    }

    .m-menu > li:hover > ul > li > a {
        display: table;
        margin-top: 1px;
        padding: 10px;
        width: 100%;
        height: 1em;
        -webkit-transition-property: all;
        -webkit-transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-property: all;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
    }

    .m-menu > li:hover li a:hover {
        background: #E7E7E7;
        -webkit-transition-property: background;
        -webkit-transition-duration: 0.2s;
        -webkit-transition-timing-function: ease-out;
        transition-property: background;
        transition-duration: 0.2s;
        transition-timing-function: ease-out;
    }
    
    /* Second level  */
   .m-menu > li > ul > li:hover li a {
        display: table;
        margin-top: 1px;
        padding: 10px;
        width: 100%;
        height: 1em;
        -webkit-transition-property: all;
        -webkit-transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-property: all;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
    }
<ul class="m-menu">
    <li> <a href="#">MENU VOICE</a>
        <ul>
<li><a href="#">FIRST LEVEL ITEM 1</a></li>
            <li><a href="#">FIRST LEVEL ITEM 2</a></li>
<li>
                <a href="#">FIRST LEVEL ITEM 3</a>
                <ul>
                    <li><a href="#">SECOND LEVEL ITEM 1</a></li>
                </ul>
            </li>
</ul>
</li>
</ul>

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

Utilize JavaScript to trigger a function depending on the selected options from dropdown menus

I've been working on a fun little project for a web page where users can select two items from a drop-down menu and then click a button to play a sound corresponding to their selections. However, I'm facing some challenges with getting my JavaScr ...

javascripthtmldrop-down-menu

Display the table once the radio button has been selected

Before we proceed, please take a look at the following two images: image 1 image 2 I have over 20 fields similar to 'Image 1'. If "Yes" is selected, then a table like in 'Image 2' should be displayed. This means I have 20 Yes/No fields ...

javascripthtmljquerycss

Improper Alignment of Bootstrap 4 Navbar Link: Troubleshooting Required

Take a look at the image for the issue: https://i.stack.imgur.com/u9aCy.png As shown in the image, the NavBar links are stacked instead of being displayed in one row. This is the HTML code I have used: <!doctype html> <html> <head> ...

javascriptcssangularbootstrap-4

The styles applied to the Angular 5 Component host element are not being reflected correctly in jsPlumb

As a beginner in Angular >2 development, I am excited to build my first application from scratch. One of the features I'm trying to implement is drawing flow charts using jsPlumb. However, I have encountered an issue where the connectors are not be ...

javascriptcssangularjsplumb

What is causing jQuery toggleClass to fail in removing a class?

I have successfully implemented a Skills accordion feature, but I am now trying to add a button that toggles all the skill sections at once. However, I am facing issues with jQuery not correctly adding or removing classes on the .accordion-trigger-all elem ...

javascripthtmljquerycss

Is it recommended to reset heading tag numbering while nesting them?

Consider an HTML book as an example (steering away from the typical blog post). Take a look at this code: <!DOCTYPE html> <html> <head> <title>The title</title> </head> <body> <h1>The title</h1&g ...

html

Master the Art of Creating Responsive Table Rows

Can someone please help me with making my table of rows and columns mobile responsive? I have inserted data from the database, but it doesn't adapt well for mobile devices. I have used element1 and content1 id for the background of the elements, but h ...

htmlcssresponsive

In Internet Explorer 7, there appears to be a white box that covers up the content on our website beyond a

I'm feeling stuck and frustrated trying to solve this issue. I have a Mac and no access to an IE7 machine, so I've been using browserlab (which is slow) to make any changes and see if they help. Unfortunately, I haven't been able to fix the ...

jqueryhtmlcssinternet-explorer-7wordpress-theming

Animations and transitions for cards

import Section from '@/components/section' import {Card, CardHeader, CardBody, CardFooter, Divider, Link, Image, Button} from "@nextui-org/react"; import { CSSProperties, useState } from 'react'; const Index = () => { c ...

cssreactjsnext.jsjsxprogressive-web-apps

To align a div or text to the right using inline-flex, simply

I am facing an issue with aligning my animated links to the right. Currently, I am using display: inline-flex, which works well but doesn't align the links properly. I have tried using float: right for alignment, but I feel there must be a better way ...

htmlcssflexbox

Retrieve the content of the 'div' element, but exclude certain text

I have a task to copy the content from a div into a textarea, allow for editing within the textarea, and ensure that any changes made are saved back to the original div. I also need to filter out an attribute, such as data-bind: "some stuff;", set for the ...

javascriptjqueryhtmlcss

Adjust the vertical size of a table cell

I am currently working on code that was written by someone else and I am facing an issue with a 3 block element that needs to be modified. My goal is to change the height of the first block so that it only goes as big as the image inside it. Despite my e ...

htmlcssemailhtml-email

(no longer supported) We are unsure about the usage of /deep/, >>>, and ::ng-deep, ::v-deep

Since /deep/ has been deprecated, I have found that using global styles instead is the only viable solution. Does anyone know of an alternative solution where we can still maintain encapsulation or scoped styling? ...

cssangularvue.jsvuejs2deprecated

What methods can I employ with JavaScript to catalog data collected from an HTML form?

Currently, my form requires users to input a username that cannot start or end with a period (.). I have implemented some code but I believe there is an issue with the .value[0] parts. //Checking Username if (document.getElementById("uName&quo ...

javascripthtml

The height of the container is not adjusted correctly after loading data via ajax which causes it to overlap with

My HTML code consists of a container with two columns (content and sidebar) and a footer. The content contains a horizontal list with li elements that are populated via ajax when the "Load More" button is pressed. I am using Bootstrap and testing on Chrome ...

jqueryhtmlcssajaxtwitter-bootstrap

html5 - Safari browser: Hover effects for rounded images

Encountering an issue on my website with a video link here. The problem is specific to Safari. Below is the HTML code: <div class="item"> <div class="img-wrapper"> <img class='img'> </div> </div> An ...

htmlcsssafari

Obtaining the referring URL after being redirected from one webpage to another

I have multiple pages redirecting to dev.php using a PHP header. I am curious about the source of the redirection. <?php header(Location: dev.php); ?> I attempted to use <?php print "You entered using a link on ".$_SERVER["HTTP_REFERER"]; ?> ...

phpjavascripthtml

Encountering difficulties reaching $refs within component method

Trying to access a ref defined within a template when an element is clicked. Here's the HTML: <!DOCTYPE html> <html lang="en"> <head> <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protectio ...

javascripthtmlvue.jsvuejs2axios

Leveraging trustAsHTML with an array of object elements

I'm facing a challenge in passing an array of objects from an Angular Controller to the ng-repeat directive. The objects within the array have multiple properties, some of which may contain HTML that needs to be displayed using the ng-repeat. I' ...

javascripthtmlangularjs

Troubleshooting: CSS background opacity issue unresolved

I am having trouble getting a parent div to fill the screen with a transparent background. The code I'm using only results in a solid color background for the parent div. Here is the code snippet I have been working with: .outer { position: rela ...

htmlcss