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

Contrasting the uses of element(...) versus element(...).getWebElement() in Protractor

What is the advantage of using element(...).getWebElement() instead of element(...) when they both perform similarly? Why are there two different APIs for the same purpose? ...

javascriptseleniumselenium-webdriverprotractor

CSS that relies on the presence of a specific class

I'm a CSS novice and I have encountered a scenario where I need to apply a CSS class only when another class is not present. <div class="border-solid p-2 bg-white mt-1 h-fit" [ngClass]="SOME_CONDITION ? 'tile-con ...

cssangulartailwind-css

Exploring the capabilities of querying HTML using XPath with Python's lxml library

After reading an HTML page as a string, I am using tree = html.fromstring(data). Now, I aim to utilize lxml xpath for querying. Here is an example of the specific part that piques my interest: <table class="class"> <tbody> <tr> &l ...

pythonhtmlxmlxpathlxml

Disable the display of meridian in the UI Bootstrap datetime picker

Currently, I am utilizing the ui-bootstrap-datetime-picker with angularJS. I am wondering if it is feasible to directly set the show-meridian options of the time-picker inside the timepickerOptions. ... <input type="text" class="form-control" ...

htmlangularjstwitter-bootstrap-3bootstrap-datetimepicker

Trying to access the label attribute of a select option in Vue.js?

Looking to retrieve the name attribute of a selected option in Vuejs. After experimenting with the value attribute, I found that it worked successfully. Below is the code I used: Tested code: <select id="countryselect" name="country" @change="onChange ...

javascriptvue.js

Basic selection menu layout

I have put together a basic menu for my WordPress site without relying on classes or IDs: <div class="main-menu"> <nav> <ul> <li> <a href="#" class="menu-link">home</a> ...

javascriptjquerycss

Exploring Nodejs and delving into fundamental queries

As I delved into the world of Nodejs, I quickly realized that my knowledge was limited to just being a user. Transitioning to creating my own server posed challenges that were not easily resolved by online tutorials. This led me here seeking guidance to tr ...

phpjavascriptnode.js

Getting rid of padding in Material UI SwipeableViews in React

Seeking assistance with the React Tabs/SwipeableViews component. I used the MaterialUI Tabs as a reference and it mostly works fine. However, I am facing a minor issue with padding in the content section. Current outcome: Current Outcome The button ...

cssreactjsmaterial-ui

Anomalous Snackbar and Alert Interactions

Why am I getting an error with this code snippet: import Snackbar from "@mui/material/Snackbar"; import MuiAlert from "@mui/material/Alert"; const Alert = ({children}) => <MuiAlert>{children}</MuiAlert> <Snackbar ope ...

javascriptnode.jsreactjsmaterial-ui

Observable in RxJS with a dynamic interval

Trying to figure out how to dynamically change the interval of an observable that is supposed to perform an action every X seconds has been quite challenging. It seems that Observables cannot be redefined once they are set, so simply trying to redefine the ...

javascripttypescriptrxjs

Mastering the use of gl Scissor is essential for effectively implementing popups in your

I am attempting to implement a pop-up view on top of the current webGL view. My strategy is as follows: Whenever I need to display a popup, I create a scissorRect and begin rendering the popup scene onto it. I was hoping that the content of the previous s ...

javascriptthree.js

How to dynamically change the color of a button in a list in Vue.js when it is clicked

I am working on a dynamic list of buttons that are populated using an array of objects: <div class="form-inline" v-for="(genre, index) in genreArray" :key="index" > ...

javascripthtmlcssvue.jsobject

How to adjust background size for Iphone4 and Iphone5 simulators using only HTML5 and CSS3 code

Creating an HTML5 app for iPhone4 and 5 with a texture-rich background. I'm facing an issue where the texture image gets scaled and only the central part is visible, even though the image size is 640x960 and 640x1136. I've tried adding @2x at the ...

iphonehtmlcssmedia-queries

Customizing the active state of a Dropdown Item in Bootstrap version 4.5

Recently, I've embarked on the journey of creating my own theme using a combination of SASS and Bootstrap. However, I've hit a little snag when it comes to achieving the desired active appearance for a dropdown item within a navbar. To be complet ...

cssbootstrap-4sasskoala

Creating a bezel design in CSS or Vue: A step-by-step guide

Embedding: Is there a CSS property that can be used to create the same angle as shown in the layout? I looked everywhere in the program but couldn't find this specific property. Tried searching here !: ...

javascripthtmlcssvue.jsfigma

Error message: Unhandled error - $(...).sidr does not exist as a function. [Chrome developer console]

I included this code in the basic module HTML block of a WordPress page builder and encountered the white screen of death. According to the Chrome developer console, the following error occurred: helpers.js?ver=4.5.3:15 Uncaught TypeError: $(...).sidr is ...

javascriptjqueryhtmlcsswordpress

a single button with dual functionalities

I am new to the development field and have a question about jQuery. I want a single button to perform two different actions. For example, let's say we have a button labeled Pause/Resume. When I click on the button, it should first display "Pause", and ...

javascriptphpjqueryhtml

Adjust the height of the container div for the carousel according to the length of the text displayed

My image carousel features description content positioned on the right for wide-screen windows. However, I want the description to shift below the images when the browser window reaches a certain breakpoint. The challenge I am facing is that the height of ...

javascriptjqueryhtml

Extracting numbers using regular expressions can be tricky especially when dealing with mixed

Currently, I am attempting to create a javascript regex that can extract decimal numbers from a string containing a mix of characters. Here are some examples of the mixed strings: mixed string123,456,00indeed mixed string123,456.00indeed mixed string123,4 ...

javascriptregex

Create a hyperlink to the tabbed navigation menu

I want to create links to the tabbed menu for my website. The homepage has 4 categories: car, van, truck, and special, each of which leads to the portfolio page. The portfolio page includes a simple filtered tabbed menu structured like this: <ul id="f ...

phphtmlcssurltabs