Tips on concealing sub-menu until cursor hovers over it

I'm currently in the process of creating a navigation bar for a website, but I'm encountering some challenges with the submenu. While I've managed to position the submenu relative to its parent ul, I'm struggling with making it invisible until the user hovers over the parent element.

For example, when hovering over "Crisis and Support," I don't want the secondary submenu to appear until hovering over the "Resources" tab. Can anyone assist me in pinpointing what I might be doing incorrectly?

Check out this [live example][1]

...

Appreciate your help!

htmlcsshover

Answer №1

To make a change in your stylesheet on line 72, do the following:

.nav ul li:hover > ul {
  display: block;
}

Additionally, ensure that your submenu is properly nested. The closing tag for "Resources For" should be placed after the submenu.

Check out this example on Codepen: http://codepen.io/SteveClason/pen/oxRyxY

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

Examining the scroll-down feature button

I'm currently experimenting with a scroll down button on my website and I'm perplexed as to why it's not functioning properly. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" c ...

javascripthtmlcss

Devices are not displaying media queries as expected

@media screen (max-width: 750px) or (screen and (max-width: 750px) (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi)) { div.body, div.body div.links, div.body div.links div, div.footer, div.footer div { display: block ...

cssmedia-queriesmedia

Header that sticks to the top of a container as you scroll through it

Many questions arise regarding sticky elements in the DOM and the various libraries available to handle them, such as jquery.pin, sticky-kit, and more. However, the issue with most of these libraries is that they only function when the entire body is scro ...

jqueryhtmlcsssticky

Is it possible to manage HTML checkboxes without using javascript?

Can dynamically created checkboxes in HTML be managed without the use of Javascript? PHP is responsible for displaying these checkboxes and my knowledge of Javascript is limited. Are there any basic functions that can identify if a user has clicked on a s ...

phphtmlcheckbox

Ways to incorporate CSS design into Django input pop-up when the input is invalid

Looking to enhance the error message styling for a Django Form CharField when an incorrect length is entered, using CSS (Bootstrap classes preferred). I have successfully styled the text input itself (check the attrs section in the code), but I am unsure ...

pythoncssdjangobootstrap-4django-forms

Can the HTML title attribute be customized?

<h2 title="Site Owner">Mr. Mark </h2> Is there a way to customize the HTML title attribute using CSS, as shown in the example above? I attempted to apply inline CSS to it, but it didn't have any effect. ...

javascripthtmlcsswebfrontend

Tips for ensuring a webpage loads at a specific resolution

I recently created a website on my computer with a screen resolution of 1920x1020. However, when I view it on other machines with a 1366x768 resolution, the website appears distorted. Is there a way to set a fixed resolution for my website to ensure it l ...

javascripthtmlcss

The background-image property fails to display on a table element

I’m having trouble displaying a background image in a table within my Django app. Here’s the code I’m using: <table style="background-image: url('/static/assets/img/myimage.png') ;background-position: 0 100% !important;background-repeat ...

htmlcssdjango

jQuery-powered unique serial numbers for tables

I've encountered an issue with my dynamic table that consists of 2 dynamic rows including students, their subjects, and marks. The code in question is provided below: Feel free to check out the code here Snippet for Serial Number function gene ...

jqueryhtmlserialization

Issues arise when attempting to use Stylus in conjunction with React

I am currently working on developing a web application that utilizes Stylus and React. I have successfully rewritten all the Stylus language files, but I am encountering an issue where the React components are not being styled as expected. Below is one of ...

cssreactjsweb-applicationsstylus

What is the method for incorporating more outer space into an inline SVG?

I have a situation where I am using an inline SVG with a transparent fill and a dark stroke. The aim is to change the fill color to dark when hovered over. However, increasing the stroke-width to make the stroke more visible causes it to extend beyond the ...

csssvginline-svg

Tips for choosing a specific quantity and adjusting its value

Just starting out with Ionic 3 and looking for some help with the code. Can anyone assist me in understanding how to change the value of an item in a shopping cart and have the subtotal reflect that change? cart.ts private _values1 = [" 1 ", "2", " 3 "," ...

javascripthtmlangulartypescriptionic-framework

Organize images with overlays to the center of the page

I need help centering a group of pictures (a 3x3 table) on my webpage. I was able to center them before adding image overlays, but now the images are showing up in the top left corner of the page. How can I group and center them, and how do I specify the i ...

htmlcss

Adjust the $scope variable depending on the size of the screen

Currently, I have a sidebar that collapses based on the value in $scope, specifically when $scope.open is set to true. However, I've noticed that if the menu is left open and viewed on mobile devices or small windows, it can look quite messy. To addre ...

javascriptcssangularjsresponsive-design

What is the reason behind the observation of executed javascript upon receiving a JSON response from the server?

My current knowledge of HTTP involves web browsers sending mainly GET or POST requests, with the server responding accordingly. I am aware that servers can return a complete HTML document that is ready to be displayed in a web browser. Additionally, I un ...

htmljsonwebsingle-page-application

What is the method for superimposing a div with a see-through input field?

I am currently designing a compact upload feature. It consists of a responsive element (actually a vue/quasar card) that adjusts in size according to the window dimensions and viewport. Within this element, there is a form containing an input field and a ...

csshtml

Transforming a datetime-local Element into a Date Object

I am currently utilizing the HTML5 element datetime-local with the requirement of having two different formats for the date. One format will be stored as a date object in the database, while the other format will be used as a string to set the datetime-loc ...

javascripthtmlformsdatedatetime

How can I achieve a fade-in effect whenever the flag image is clicked?

A unique "international" quotes script has been created, showcasing Dutch, English, German, and French quotes. The script displays different quotes every day, with a draft-result visible in the upper right corner of this page ... The code used for this sc ...

javascripthtmlcssfadein

Tips for reversing a sketch: Creating a timer where the text continuously refreshes causing it to intersect

Currently, I am working on developing a stopwatch that is functional. However, I am facing an issue where the text overlaps itself when it changes due to repetitive drawing. Removing the strokeText and fillText from the interval prevents it from changing a ...

javascripthtmlsetintervalstopwatch

Creating dynamic templates for table rows in AngularJS directives

Is it possible to dynamically load an AngularJS Directive templateUrl while working within a table? In my scenario, I have the following HTML structure where I am repeating a tr element with a fw-rule directive: <tbody> <tr ng-repeat="rule in ...

javascripthtmlangularjsangularjs-directive