Is there a way to hide a submenu when it is clicked on without having to rely on

After reviewing this example:

https://www.w3schools.com/howto/howto_css_subnav.asp

I am interested in finding a way to hide the submenu when clicked, without relying on Javascript. Is this achievable?

The submenu can be triggered to appear upon hover without the need for JS. The objective is to conceal the submenu once an item within the submenu is clicked. For instance:

https://i.sstatic.net/JfLy0.png

If you select "Package," the entire submenu and red background should disappear.

Amendment 1: I have tried using :has and :target with different combinations to change it to display: none. Unfortunately, that approach did not yield the desired outcome.

htmlcss

Answer №1

While technically possible, the answer to your question is not as straightforward as you might hope. If you were thinking of using anchor elements for your subnav links/buttons, it's true that you could employ some clever CSS tricks with pseudo classes like :visited and :has to control the display of the submenu. However, this may come at a cost - namely, the normal functionality of your page. Once a link has been visited, reverting back to its original state without JavaScript intervention could prove tricky if not impossible.

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

Issues with Owl Carousel Slider not functioning smoothly

I made a Owl Carousel Slider with an autoplay feature, but I'm having trouble getting it to slide smoothly. Does anyone have any tips on how to make the following code run more smoothly? Javascript Code var owl = $('.owl-carousel'); owl.ow ...

javascriptjquerycsstwitter-bootstrapowl-carousel

how to reorganize page sections using javascript

Hello, I am new to HTML5 and Javascript and I am trying to create a simple function that swaps the positions of two sections using an event trigger. The first function works fine, moving the section with ID "con" to the top. However, the second function i ...

javascripthtml

Guide on attaching an arrow to a div card

I have a lineup of cards displayed in a horizontal row. By scrolling left or right, I can navigate through the rest of the cards. By selecting a card, it expands to reveal a small panel that drops down with an arrow pointing towards it. As I continue to ...

htmlcss

Foundation 6: Alignment issues with Top Bar

Exploring Foundation 6 and trying out the sample code. I'm puzzled as to why the "Site Title" is not in alignment with the rest of the top-bar, it seems to be slightly higher up. <div class="top-bar"> <div class="top-bar-title"> ...

csshtmlzurb-foundationzurb-foundation-6

Allow frontend JavaScript to retrieve a text file that is restricted to individual users

Trying to articulate my goal is challenging, but I'll do my best to clarify. My objective is to enable JavaScript (or an alternative solution) to retrieve data from a text file on a static site and utilize that data in some way. The challenge here is ...

javascriptjqueryhtmlcssweb

Adjusting the font size using viewport units for mobile Chrome browser

In the process of building a website, I decided to implement varying CSS styles for desktop and mobile versions. For responsive font sizes on mobile, I opted for vw units instead of media queries due to the constant changes in mobile screen sizes. However, ...

cssresponsive-designfont-sizemobile-websiteviewport-units

Creating a table-like structure in HTML using `<div>` elementsWould you like to

I am looking to design a basic HTML page with a menu bar on the left side occupying 17% of the width, and content on the right side occupying 83% of the width. Below is the HTML code I have constructed: .row { display: block; } .cell { padding: 0; ...

htmlcss

Displaying text in the incorrect location due to issues with the bootstrap collapse feature

I have implemented Bootstrap 4 collapse feature to show text when clicked, however, I am facing an issue with the placement of the content. The text is currently being displayed on the right side when clicking the button, but I would like it to appear belo ...

htmlcssbootstrap-4

Cordova encountered an error: Execution of inline script was denied due to violation of Content Security Policy directive

As I delve into the world of Cordova and jquery mobile, I encountered a perplexing error that reads: Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self' data: gap: 'un ...

javascriptjqueryhtmlnode.jscordova

Transmit data when uploading a file

One of the fields in my form is a file upload. The field looks like this: <div class="form-group"> <label class="control-label col-md-2">ID Ordine</label> <div class="col-md-4"> <input class="form-control" type ...

pythonhtmlflask

Ways to deactivate a text area or mat-form-field

I need assistance with disabling a form field using Angular (4) + Angular Material and Reactive Forms. I have tried searching for syntax options like disabled="true", but haven't found the correct one yet. Can you please provide me with the right synt ...

htmlangularangular-material

The color of text is being altered by IE 7's gradient filters

I'm facing an issue with the CSS code applied to a button (along with other styles): border: 1px solid #86A74B; border-top: 1px solid #B0C5B0; background-color: #91B248; background-image: -moz-linear-gradient(top, #9BBC52, #84A440); background-image: ...

internet-explorercssinternet-explorer-7

How can I use jQuery to reset a select dropdown to its initially selected option upon page load?

Can a select element be reset to its original loaded option using jQuery without the need for creating a custom cache of the initial value? ...

jqueryhtmldom

Transforming text color on hover: A quick guide

Is it possible to change the text color on hover of a <li> without hovering over the text itself? For a demo, visit http://jsfiddle.net/EU4cz/ Here is the HTML code: <nav id="NAv" > <ul> <li><a href="">Home</a></li ...

jqueryhtmlcss

The problem I'm facing with the space-between property in my flexbox list

I am working with a list ol that contains items styled as shown below: ol { display: flex; flex-flow: row wrap; justify-content: space-between; width: 400px; } li { width: 120px; height: 120px; } DEMO Currently, I have 3 it ...

htmlcssflexbox

Obtain value of dropdown selection upon change

What is the best way to retrieve the selected value in a drop-down menu when the ID dynamically changes with each refresh? Is it possible to access the particular selected value even when the ID changes? <select name="status" id="dropdown_status3352815 ...

javascriptjqueryhtmlhtml-select

Activate vertical scrolling in JavaScript when an image is clicked

I currently have a collection of button images with different hover effects specified like this: <img src="home.PNG" onmouseover="this.src='homemo.PNG'" onmouseout="this.src='home.PNG'" /> My goal is to make them scroll down to ...

javascriptjqueryhtmlcss

What is the best way to horizontally center a div while ensuring the content within the div stays aligned?

I'm attempting to align a div in the center while maintaining the position of its contents. Check out my code snippet: <style> .wrap{ position: relative; } .character{ position: absolute; bottom: -10%; left: 0; heigh ...

htmlcss

New Release: Bootstrap4 beta introduces improved table features and d-inline-block styling

I need to arrange multiple tables side by side and allow horizontal scrolling overflow if they don't fit on the page. Here is a sample in jsfiddle: https://jsfiddle.net/c949Lspy/10/ Using Bootstrap: <div style="white-space: nowrap;"> <ta ...

htmlcssbootstrap-4

Determining the button's width relative to its parent's size using a

I'm trying to make my button take up 90% of the width of the screen. After testing my HTML code, I noticed that the button is only occupying around 10% of the screen. However, when I specify the width using pixels, it adjusts correctly. What could b ...

htmlcss