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

Tips on how to align a wrapper-div in the center without affecting the positioning of the

I am looking to keep my page perfectly centered in the browser without affecting the content (similar to how align-text: center works). Specifically, I want to center my wrapper-div. How can I achieve this? Here is a simplified version of my current page ...

htmlcsspositioning

Cease the use of the jQuery.css() method

Does anyone know how to halt the jQuery css() function? I've successfully used the jQuery.stop() function to pause the animate() function, but I'm unsure about stopping css(). Any help is appreciated. Thanks! ...

jquerycssfunction

Having trouble with positioning divs on top of each other? Struggling to get position absolute to work correctly?

Currently, I am utilizing flexbox to construct a grid layout. However, I have hit a roadblock when attempting to make the divs stack on top of each other. The overflow:auto is hidden and position relative has been added to the carddiv. While the divs are s ...

htmlcssreactjs

Having trouble printing webpages? Need a useful tutorial on how to print web pages created using jQuery UI, jqGrid, and Zend?

I have been tasked with printing web pages of a website that utilize jqgrid, Jquery calendar, various Jquery UI components, and background images. The server side is built with Zend Framework. Although I lack experience in web page printing, this has beco ...

javascriptjquerycssprintingjqgrid

Enhancing PHP Markdown to Support Custom CSS Classes

Markdown is a tool I use frequently in my PHP projects, but sometimes I find its output to be too simplistic. I wish I had more control over the layout and design of my content. For example, when inserting an image: <p> <img src="path/to/image. ...

phpcssmarkdown

In Firefox, the width of a CSS grid cell is larger than the actual content it contains

My dilemma involves a div with a height of 15vw and the desire to insert four images into this div (each image's size is 1920*1080 px). When using the code below, everything appears correctly in Chrome. However, in Firefox, each image size is 195*110 ...

cssfirefoxcss-grid

What is the best way to vertically align items within a <div> using CSS in a React application?

The layout of the page looks like this: I am trying to center the Redbox (containing '1') within the "PlayerOneDiv". Similarly, I want to center the yellow box within "PlayerTwoDiv". return (<div className="App" ...

htmlcssreactjsangularflexbox

Issues with hover functionality in React Material Design Icons have been identified

I'm facing an issue with the mdi-react icons where the hovering behavior is inconsistent. It seems to work sometimes and other times it doesn't. import MagnifyPlusOutline from "mdi-react/MagnifyPlusOutlineIcon"; import MagnifyMinusOutli ...

javascriptcssreactjsmaterial-uijsx

Fancybox overlay not adjusting to full height

When working with JavaScript: $(document).ready(function() { $(".fancybox").fancybox({ helpers: { overlay: { opacity: 0.4, css: { 'background-color': '#FFF' ...

jqueryhtmlcssfancyboxfancybox-2

Handling mousewheel events for child elements and their parent element

I developed a custom jQuery plugin that replaces the default scrollbar with my own, managing mousewheel and bar dragging events. The issue arises when I place content containing my custom scrollbar within another content also using my scrollbar. When I sc ...

javascriptjqueryhtmlcssmousewheel

Unfortunately, the header and footer are not lining up correctly with the main body on our mobile site

I've been tasked with creating a fully responsive website, but I'm encountering difficulties with the mobile design. Specifically, when I switch to mobile dimensions like an iPhone 12, the header and footer don't line up properly with the ma ...

javascripthtmlcss

Loading Images in Advance with jQuery, Native JavaScript, and CSS

After successfully implementing a method to hover on a small image and load an additional image to the right side of the page, I am now looking to enhance user experience by preloading images. Is there a way to preload an image using JQuery, allowing it t ...

javascriptjquerycssimagepreloading

Creating space between elements in CSS div elements

I've come across numerous resources on this topic that have already been answered, but none of them have provided a satisfactory solution. Here's the scenario: I have created a basic fiddle showcasing the desired behavior: @ See fidlle If I h ...

htmlcss

Prevent text wrapping and clear floats in a clean and hack-free way

I am currently in the process of compiling a collection of blurbs accompanied by images that can be easily integrated into any section of our website. My goal is to ensure that these blurbs are versatile, free from rigid width specifications, and compatibl ...

csscss-float

I want to create a feature in Angular where a specific header becomes sticky based on the user's scroll position on the

When working with Angular, I am faced with the challenge of making a panel header sticky based on the user's scroll position on the page. I have identified two potential solutions for achieving this functionality. One involves using pure CSS with pos ...

javascripthtmlcssangular

Resizeable drag and drop two-column design

Experimenting with creating a drag re-sizable layout using jQuery UI was quite an interesting challenge for me. If you want to check out the result, here is the link. However, my original goal was to achieve something different from what I ended up with. ...

jquerycssjquery-ui

Generate a Customized Navigation Bar in Real Time

Currently, I am seeking the most effective method to dynamically generate a complex navigation component. All necessary elements are stored in a database with attributes such as title, id, and parentId. My goal is to efficiently retrieve this data from the ...

phpmysqlnavigation

Position 2 identical classes side by side on the horizontal axis

Currently enrolled in the MIMO HTML course and facing a challenge where I am unable to align both elements with the class="column" attribute horizontally using display: inline-block; I have attempted using float:right and other CSS properties to achieve a ...

htmlcssclass

implementing a time picker feature with jQuery

As I am not familiar with jQuery, I came across this script while searching for a time picker. If anyone could guide me on how to incorporate this code into my HTML page to enable the time picker functionality, I would greatly appreciate it. /* jQuery t ...

jqueryhtmlcss

Tips for choosing every <div> within a specific class

I'm trying to create multiple boxes within a class, all with the same background color. I've written code for 6 boxes in the "color-board" class, but when I go to select them, only 1 box is displaying... Below is the code for the class and how I ...

htmlcss