Attempting to incorporate a new CSS sub menu alongside the current one

Having trouble with menu styling, I'm new to this and trying to add a sub menu to an existing drop down menu.

Check out my JSFiddle

This is the CSS code:

.menu_main {
float: left;
width: 60%;
}

#access .menu {
list-style: none;
font-weight: normal;
position: relative;
float: left;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
text-transform: uppercase;
margin-top: 0px;
}
...
.selectnav {display: none; width: 440px; margin-left: 20px;}

I designed this HTML code a while ago and can't figure out why the sub-menu isn't showing up when adding another level to it.

<div class="menu_main">
...      
    </nav>

</div>
cssdrop-down-menunavigationsubmenumulti-level

Answer №1

If you want to show the child elements when hovering over the parent elements, you can use this CSS code:

#access .menu ul li:hover ul{display:block;}

I also wanted to point out that using both display:none and visibility:hidden to hide sub menus is not necessary. Simply stick with display:none as shown below:

#access .menu ul li ul {
 position: absolute;
 left: 0;
 height: auto;
 display: none;
 width: 194px;
 padding: 0;
 margin-top: -1px;
 text-align: left;
 background: #615c73;
 border-top-left-radius: 0px;
}

Check out the DEMO for a live example.

Answer №2

Here is a new solution for your inquiry.
I believe the explanation provided in this resource will help you understand and resolve your issue.

Highlighted below is the crucial code snippet:

ul li:hover ul {
    display: block;
}

ul li ul {
margin: 0;
padding:0;
display: none;
position: absolute;
left: 10px;
background:#efefef;
}

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

In MUI React, the opacity of the placeholder is customizable and can be easily adjusted. This allows for the placeholder to be hidden

Currently, I am facing an issue with a filled variant TextField from Mui React. I have tried to modify it using theme components, but the placeholder text becomes hidden when the field is not focused. See here for Before Focus And here for On Focus I hav ...

cssreactjstypescriptmaterial-uiplaceholder

When an external image is dragged over, include the class in the drop area of the file input

Hey, does anyone know how to use Jquery to add a class when an element is being dragged over a drop area? Here's the HTML code I'm working with: <div class="upload"> <form action=""> <input class="uploadfile" type="file" ...

javascriptjqueryhtmlcssdrag-and-drop

Is it possible to apply identical css styles to multiple ids at once?

Is there a way to accomplish this? .apple, .orange, .kiwi h1 {color: #892828;} I'm having trouble making it work. Any suggestions? ...

css

Tips for creating a section that perfectly stretches to cover the entire view port in HTML

After browsing through this website, I was inspired by its design and wanted to replicate something similar. The unique approach they took to ensure each section fits 100% of the viewport caught my eye. They utilized a "div section-background" within each ...

htmlcssbackgroundviewport

CSS Opacity Issue

Why is the article transparent? Despite my efforts to search online for similar instances, I am surprised at not finding anything and feeling quite puzzled about what steps to take next. body { background-color: #000000; opacity: 0.8; background-i ...

htmlcss

What is the best way to combine a top <div> with a bottom <div> in an image without creating unsightly white gaps?

I need help overlapping two divs on top of an image in HTML. The first div should cover part of the top area of the image, while the second div should cover part of the bottom area of the image. These divs should be displayed over the image without leaving ...

htmlcssweb-frontend

Dropdown search menus are failing to appear in the correct location

I have 4 dependent search dropdown menus side by side. There are two issues I am facing: Whenever I type in any of the drop-down menus, the MySQL-connected lists appear but not directly beneath the actual 'input-type-search-box'. Additional ...

phpjavascripthtmlcssajax

Tips for customizing the appearance of path elements within an external SVG file being utilized as a background image

How can I change the color of the paths in an SVG background image assigned to a div using CSS? ...

htmlcsssvg

The "Read more" feature is not functional on mobile devices

I am encountering issues with my Wordpress blog on mobile screens. The "read more" button is not functioning, and the screen size does not fit properly on mobile devices. Visit abood250.com for more information. CSS Styling: /* =Global ----------------- ...

javascriptjqueryhtmlcsswordpress

Surprising sight of a blank canvas behind the font-awesome icon

Is there a way to remove the unexpected white background that appears when adding a font-awesome icon? Here is the HTML code: <div class="notifications-window" id="close-notifications"> <div class="notifications-header&qu ...

htmlcssiconsfont-awesomestyling

What is the best way to position the top line next to the border?

I've been attempting to create a falling line effect on the left side of the box's border, but I can't seem to figure out what's causing the issue. Below is the code snippet: @import url('https://fonts.googleapis.com/css ...

htmlcss

Is the card-columns class not available in Bootstrap 5.0? Are there any other alternatives provided by Bootstrap besides using CSS media queries and flex column?

While exploring Bootstrap 5.0, I noticed that the card-columns class was missing and there is no mention of it or its alternative in the Bootstrap 5.0 documentation. However, it can still be found in the Bootstrap 4.6 documentation. I understand that usin ...

csstwitter-bootstrapbootstrap-4bootstrap-5

The @media feature is not functioning properly

I am struggling with getting my media query to function properly on a school project. Despite carefully checking my code, I cannot figure out why it is not making the desired changes when viewed on a mobile device. If anyone has any suggestions or insigh ...

cssmedia

What's the best way to show floating point numbers in a concise format while also maintaining the ability to perform calculations within this Vue app?

I'm currently developing a compact calculator application using Vue 3 and implementing some custom CSS. For the most part, everything seems to be functioning correctly, except for when the results are long numbers that extend beyond the display limit ...

javascriptcssvue.jscalculatorvuejs3

Utilizing CSS variables and HSLA, create a distinctive linear gradient styling

I am encountering an issue with a CSS variable: :root{ --red: hsl(0, 100%, 74%); } Despite defining the variable, it does not work in the following code snippet: .page-wrapper{ background-image: linear-gradient(hsla(var(--red),.6), hsla(var(--red),.6 ...

htmlcss

Tips for customizing CSS for the ValidatorCallout Extender in an ajax tool

I am currently attempting to implement the ValidatorCallout Extender feature from the asp.net Ajax website. However, I am struggling with customizing the CSS for the popup validator. ...

asp.netajaxasp.net-mvccssajaxcontroltoolkit

Having trouble with CSS text not wrapping correctly?

While working on a web application, I encountered an issue where the text within a <div> element on my page was not wrapping properly and instead overflowing outside the box. The <div> in question goes through two stages: one where it is not e ...

cssoverflowwhitespace

A div element appears without any height if there is an image contained within it

I am facing a challenge with a div[div1] that contains other elements. The elements inside have an absolute positioned image, and both div1 and the elements have a float left property without showing any height. Is there a solution to give div1 a height so ...

htmlcss

Get rid of any fonts that are causing rendering delays on amp pages

Encountering issues with Google Lighthouse and AMP Pages https://i.sstatic.net/EXiha.png I have attempted various solutions but none seem to be working <link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400, ...

htmlcssfontsamp-htmllighthouse

Adjust the size of a Highcharts chart before printing

I'm facing an issue with a chart that doesn't have a specified height or width. My goal is to print the graph in a taller and larger size when I click on the print button. I attempted to use setSize() function, but since there are no original di ...

javascriptjqueryhtmlcsshighcharts