Tips for displaying a sub-menu upon hovering

I am attempting to display the list of sub-menu items when hovering over the main menu item. I have tried using the following CSS code, but it did not work as expected. Any assistance will be greatly appreciated.

CSS:

summary.header__menu-item.list-menu__item.link:hover u.header__inline-menu details[open] > .header__submenu,
summary.header__menu-item.list-menu__item.link:focus .header__inline-menu details[open]>.header__submenu {
    display: block;
}

HTML Structure here:

<nav class="header__inline-menu">
    <ul class="list-menu list-menu--inline" role="list">
        <li>
            <a href="/" class="header__menu-item header__menu-item list-menu__item link link--text focus-inset">
                <span>Home</span>
            </a>
        </li>
        <li>
            <details-disclosure>
                <details id="Details-HeaderMenu-2">
                    <summary class="header__menu-item list-menu__item link focus-inset" role="button" aria-expanded="false" aria-controls="HeaderMenu-MenuList-2">
                        <span><a style="text-decoration:none;" href="/pages/meal-kits">Meal Kits</a></span>
        
                        <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"></path>
                        </svg>
                    </summary>
                    <ul id="HeaderMenu-MenuList-2" class="header__submenu list-menu list-menu--disclosure caption-large motion-reduce" role="list" tabindex="-1">
                        <li>
                            <a href="/collections/jamaica" class="header__menu-item list-menu__item link link--text focus-inset caption-large">Jamaica</a>
                        </li>
                        <li>
                            <a href="/collections/guyana" class="header__menu-item list-menu__item link link--text focus-inset caption-large">Guyana</a>
                        </li>
                        <li>
                            <a href="/collections/trinidad" class="header__menu-item list-menu__item link link--text focus-inset caption-large">Trinidad &amp; Tobago</a>
                        </li>
                    </ul>
                </details>
            </details-disclosure>
        </li>
    </ul>       
</nav>
javascripthtmlcss

Answer №1

Unfortunately, CSS alone cannot achieve this effect. The only way to toggle content inside a details element is by clicking on its child summary, or by using JavaScript. To implement this in your scenario, you will need to adjust your HTML markup and apply the following CSS styles:

.has-submenu {
    position: relative;
}
.header__submenu{
   display: none;
   position: absolute;
}
.has-submenu:hover a + .header__submenu {
    display: block;
}
<nav class="header__inline-menu">
    <ul class="list-menu list-menu--inline" role="list">
        <li>
            <a href="/" class="header__menu-item header__menu-item list-menu__item link link--text focus-inset">
                <span>Home</span>
            </a>
        </li>
        <li class="has-submenu">
            <a style="text-decoration:none;" href="/pages/meal-kits">
                Meal Kits
                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6" width="15">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"></path>
                </svg>
            </a>
            <ul class="header__submenu list-menu list-menu--disclosure caption-large motion-reduce">
                <li>
                    <a href="/collections/jamaica" class="header__menu-item list-menu__item link link--text focus-inset caption-large">Jamaica</a>
                </li>
                <li>
                    <a href="/collections/guyana" class="header__menu-item list-menu__item link link--text focus-inset caption-large">Guyana</a>
                </li>
                <li>
                    <a href="/collections/trinidad" class="header__menu-item list-menu__item link link--text focus-inset caption-large">Trinidad &amp; Tobago</a>
                </li>
            </ul>
        </li>
    </ul>       
</nav>

Answer №2

Based on my understanding, you may define it as follows. However, the code provided doesn't give a clear indication of the issue with CSS not functioning correctly.

.header__submenu{
   display: none;
}
.header__menu-item:hover .header__submenu{
   display; block;
}

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

What are the best techniques for styling a SELECT box with HTML and CSS?

I've received a form from a talented designer which includes SELECT inputs designed in a unique manner. Despite my attempts to add paddings, adjust backgrounds, I'm unable to replicate the exact appearance of the select box shown in the image. ...

htmlcssselectinput

Refreshing the child component based on the child's action and sending information to the parent in a React application

Within my Parent Component, I am utilizing an Ajax call to populate two children Components. C1 requires the data only once, while C2 has the ability to fetch additional data through subsequent Ajax calls and needs to render accordingly. I find it more co ...

javascriptreactjs

The Input element's onChange event is not functioning as expected

I am experiencing some issues with my code. I am trying to dynamically change the background color based on user input, but I am struggling to make it work. It seems like a simple task, so I must be missing something. Below is my HTML markup and jQuery: ...

javascriptjqueryhtml

How can I improve the empty space in HTML after PHP processing?

Here are the lines displayed in HTML: <a href='http://www.1stheme.dev/?frontiles=1946'> <article class="post-1946 frontiles type-frontiles status-publish hentry Width_1_Height_1 " style="width:326px;height:326px;text-align:left;" id="po ...

phphtmlwordpress

Encountering the error message "ws02 script tag does not define Map"

When I try to create a map using the following code: let myMap = new Map(); I encounter the error shown below. Script Error: The script engine encountered an error while executing the inlined Javascript function 'mediate'. com.sun.phobos.script. ...

javascriptwso2javascript-objectswso2-api-managerwso2-micro-integrator

Align the radio buttons vertically

My goal is to align all my buttons vertically, similar to the first question. However, I'm struggling to get the second question to align correctly. Despite trying different methods like using the vertical-align: middle property, nothing seems to be w ...

htmlcssradio-buttonalignment

What is the process for adding a Contact Us page to a website?

I recently created a website using html, css and Javascript. I would like to include a 'get in touch' page where visitors can send me messages directly on the site. What steps should I take to make this happen? Is it necessary to set up a databas ...

javascriptcss

Is it possible to define a constant enum within a TypeScript class?

I am looking for a way to statically set an enum on my TypeScript class and be able to reference it both internally and externally by exporting the class. As I am new to TypeScript, I am unsure of the correct syntax for this. Below is some pseudo-code (whi ...

javascriptclassbackbone.jsenumstypescript

Data streaming using Node.js

Is it feasible to continuously stream data from the server to the client using Node.js? My goal is to send a single AJAX request to Node.js, establish a persistent connection, and stream data to the client for real-time updates on the page. Latest Update: ...

jqueryhtmlajaxnode.jsdata-stream

Store my JSON data in a separate file and then reference it in my controller

Hello, I am currently working on an AngularJS application development project. Within my JSON data, I have information structured like this: angular.module('app', []).controller('MainController', ['$scope', function($scope) { ...

javascriptangularjsjson

Issue with logging objects in an array within a for loop

I am having an issue with a JavaScript for-in loop. Why does console.log(user) display the number "0" when iterating through users? Is it indicating the index of the user object in the array? I would like to log each object individually... Thank you r ...

javascriptexpress

Alert: Unauthorized hook call and Exception: Cannot access properties of null (reading 'useState')

I am currently working on a project using ASP.NET Core with React. To bundle my code, I have opted to use Webpack 5. Within the index.jsx file, I have the following code: import { useState } from "react"; function App() { const [value, setV ...

javascriptreactjsasp.net-corewebpack

What could be causing the TypeError that is preventing my code from running smoothly?

I can't seem to figure out why I'm constantly encountering the error message Cannot destructure property 'id' of 'this.props.customer' as it is undefined.. Despite double-checking my code and making sure everything looks corre ...

javascriptreactjsdebugging

Show information upon opening

I am currently working on a project that involves 4 different divs, and I need the content of each div to be displayed based on dropdown selection. I found a code snippet that was close to what I needed, but after trying to adjust it, I haven't been a ...

javascripthtml

The issue with jQuery trigger not passing the value of a radio button has been

I have implemented a radio button (Yes, No) and an input text box on my form. If the user selects 'No', the input field is disabled and jQuery triggers a change event for AJAX form submission. $('#form-id').change(function(){ .... }); ...

jqueryhtmlajaxtriggers

Enigmatic blank space found lurking beneath the image tag

Recently, I made a change to the header image on my website. Previously, it was set using <div style="background-image... width=1980 height=350> and now I switched to <img src="... style="width:100%;"> This adjustment successfully scaled do ...

htmlcss

Experience the dynamic expansion of a droppable div as you elegantly drop an element within

When the questions "question1" and "question2" are dragged into "questionslots," I want the "questionSlots" div to expand its size dynamically when the second question is dropped into it. This means that both questions should be accommodated and visible wi ...

jqueryhtmlcssjquery-uidraggable

Formulate a targeted search request according to the selected radio button option

I'm working on a form that looks like this: <form> <input type="text" id="searchedWord" class="form-control form-control-lg" value="words here"/> <button type="submit" id="f ...

javascriptjqueryajaxformsradio-button

Top method for displaying loading popup using $http

As a newcomer to Angular, I am curious to know if it's possible to achieve the following scenario and also where I can find documentation to help me get started. The scenario: In my MEAN app, there is currently a 'loading...' popup controll ...

javascriptjqueryangularjs

Iterating variables in Vue.js is reminiscent of the process in AngularJS

When working on my application using vue.js, I am interested in finding the last repeated element within a v-for directive. I understand that in angularjs, there is a similar concept using the $last loop variable in its ngRepeat directive: <div ng-repe ...

javascriptangularjsvue.js