CSS, Assistance in incorporating a sub menu into a drop-down menu

I'm looking to enhance my drop down menu by adding a sub menu. Specifically, I would like to create a sub menu for Item 3 in the HTML below. How can I achieve this?

Thank you,

Below is my CSS code:

.nav_menu {
    width:100%;
    background-color:#EFEFEF;
    z-index:2000;
    border:1px solid #ccc;
}
.selected {
    background-color:#ccc;
    color:#333;
}
.nav_menu a:link {
    color:#007dc1;
}
.nav_menu a:visited {
    color:#007dc1;
}
.nav_menu a:hover {
    color:#007dc1;
}
.nav_menu ul {
    text-align: left;
    display: inline;
    margin: 0;
    padding: 15px 4px 17px 0;
    list-style: none;
}
.nav_menu ul li {
    font-size:16px;
    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 8px 22px;
    font-weight:600;
    transition: all 50ms linear;
    transition-delay: 0s;
}
.nav_menu ul li ul {
    padding: 0;
    position: absolute;
    top: 37px;
    left: 0;
    width: 230px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    display: block;
    opacity: 0;
    -webkit-transition: opacity .2s;
    z-index:50000;
}
.nav_menu ul li ul li { 
    background-color:#535353;
    border-top:1px solid #fff;
    display: block; 
    font-size:12px;
    color:#fff;
}
.nav_menu ul li ul li:hover { 
    background: #B2B2B2; 
}
.nav_menu ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

Below is my HTML code:

<ul>
 <li>All Items
   <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3 with Sub Menu</li>
   </ul>
 </li>
</ul>
htmlcssdrop-down-menusubmenu

Answer №1

Before anything else, it is important to note that your menu relies solely on the CSS :hover pseudo-class. Make sure there are no spaces between your ul and li elements, as this could cause the entire menu to disappear.

The HTML snippet

<div class='nav_menu'>
    <ul>
     <li>All Items
       <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li class='nav_menu_sub'>Item 3 with Sub Menu
          <ul>
            <li>SubItem 3.1</li>
            <li>SubItem 3.2</li>
          </ul>
        </li>
       </ul>
     </li>
    </ul>
</div>

To create a sub-menu like the drop-down you've already implemented, simply nest a ul element within the li element. I included a nav_menu_sub class in the li for easy CSS selection (avoiding .nav_menu ul li ul li).

The CSS snippet

.nav_menu_sub {
    padding:0;
    margin:0;
}

.nav_menu_sub ul {
    margin-top:-7px;
    display: none !important;
}

.nav_menu_sub:hover ul {
    display: block !important;
    opacity: 1;
    visibility: visible;  
}

The margin-top:-7px on the ul element ensures a seamless fit against the li.

Use !important with the display attribute to override any prior styling declarations.

See it in action on jsFiddle: http://jsfiddle.net/akhrbkug/

Answer №2

Upon reviewing the css provided:

.nav_menu ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

It seems like an additional ul is required in the submenu li:

<ul>
 <li class='nav-menu'>All Items
   <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3 with Sub Menu
      <ul>
        <li>SubItem 3.1</li>
        <li>SubItem 3.2</li>
      </ul>
    </li>
   </ul>
 </li>
</ul>

For a demonstration, you can visit this Fiddle: http://jsfiddle.net/ee9ebv2s/

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

Get the Bootstrap download that includes CSS files rather than the LESS files

What is the reason behind bootstrap switching to only having LESS files instead of the traditional bootstrap.css file? Is there a way to download the bootstrap framework that includes the CSS files instead of just the LESS files? ...

csstwitter-bootstrapless

Customize the appearance and text in the navigation bar

Currently, I am in the process of creating my own personal website template. However, I have encountered an issue with styling the image and text within the navbar. I am looking to adjust the aspect ratio of the image in order to center it within the n ...

htmlcss

Glitch in Safari 6: Round Corners Issue

Greetings! Upon observing the image provided, an unusual behavior can be noticed in Safari 6 concerning round corners. { border-radius: 5px 5px 5px 5px; } Upon hovering over the elements, a thin line appears that seems to accumulate with each subsequent ...

safaricss

What is the reason behind the overflow in the HTML body?

I am currently honing my skills in front-end development by attempting to replicate the functionality of . Everything seems to be working fine, except for the fact that there is an overflow issue identified within the <body> element when inspecting w ...

htmlcss

Unusual ways that backgrounds and borders behave while incorporating CSS transitions for changes in height, positions, and transformations

I was under the impression that I had come up with a brilliant idea... I wanted to create a button with a hover effect where the background would do a wipe transition (top to bottom, left to right) using soft color transitions. My plan was to achieve this ...

csshoverz-indextransparenttransition

Tips for getting the jQuery accordion to return smoothly to its original position (instead of stacking on top of each other)

I'm a complete beginner at this and could really use some assistance. Here's my JS Fiddle: http://jsfiddle.net/hAZR7/ The problem I'm facing seems to be more related to logic or math, as the animation works fine when starting and moving to ...

javascriptjqueryhtmlmath

Unable to trigger onClick event

The button I have with the id "jump-button" is not functioning at all. When clicked, nothing happens. I have added an alert(); to the onclick attribute to test if the button is working. However, the other two buttons (next and prev) are working perfectly ...

javascripthtmlonclick

Deciding which HTML element to display in AngularJS

What is the method of selecting which HTML element to display in AngularJS? When retrieving a value from the database, if it is YES, I would like to display this: <i class="fa fa-check"></i>, otherwise display this: <i class="fa fa-times"& ...

htmlangularjs

select2 with customizable multi-column layout

Looking to create a multi-column select2 with a dynamic number of columns by specifying the number of columns as a data attribute in the select tag, or utilizing another method. <select data-cols="2,6,4"> <!--note data-cols--> < ...

htmljquerymultiple-columnsjquery-select2

Angular2 Components with Unique Styling

I am working on an Angular2 app that includes several components, some of which I want to reuse multiple times on a single page. Instead of having three separate components, I am looking to refactor and combine their functionalities into one. The basic st ...

htmlcssangularangular2-template

Grayscale to color image slider using JQuery, HTML, and CSS

Seeking assistance from the talented individuals here. Currently in the process of constructing a website for a client, and one of the key components on the index page is an image slider/fader that showcases a series of images. The client has requested a u ...

htmljquery-uicss

Attempting to execute a PHP script through a JavaScript if statement

I have a form that requires validation with JavaScript. In one of the if statements, after all other conditions have been validated, I want to execute my PHP script that updates an SQL database with one of the passwords. Here is the final validation code: ...

javascriptphphtmlformsvalidation

Content is not being contained within a div container

I'm facing a unique issue that I've never encountered before - text is not wrapping inside a div element. Here's a snippet of my HTML code: http://jsfiddle.net/NDND2/2/ <div id="calendar_container"> <div id="events_container"& ...

cssword-wraphtmltext

What method can be used to dynamically resize two side-by-side iframes in proportion to a specific ratio?

Hey, I've got this code snippet: So there are two iframes positioned side by side with a specific ratio as indicated in the link provided. My aim is to maintain that ratio regardless of the screen size where it's viewed. The first iframe is named ...

htmlcssiframe

Manipulating the visibility of components by toggling on click events according to the existing state in ReactJS

Disclosure: I am still getting familiar with ReactJS I'm currently working on incorporating a dialog window for selecting a country/language on the initial page of my application. Here's the concept: There's a small flag button in the to ...

javascriptcssreactjs

How can the presence of a CSS rule prevent another from being applied?

My attempt to create this HTML file in Chrome posed some challenges: <style> br { }​ [required] { border-width: 3px; border-color: red; } </style> <input required /> The entire content of the file is shown above. However, I noti ...

htmlcssgoogle-chrome

Problem Alert: Click Event Not Functioning on Generated Links

Take a look at these two code snippets. Despite other jQuery functions in the same JS file working fine on the UL element, nothing seems to be happening with these. Is there something obvious that I am missing? <ul id="activityPaganation" class="paga ...

javascriptjqueryhtml

Transforming iframe programming into jquery scripting

Currently, I have implemented an Iframe loading the contents within every 5 seconds. It works well, however, there is a consistent blinking effect each time it loads which can be quite bothersome. I am looking to replace the iframe with a scrolling div so ...

javascriptphpjqueryhtmliframe

Developing a Jquery solution for creating radio buttons layout

Looking to create a radio button functionality within different groups using multiple select. For Group A: If the user selects A1, then it should automatically deselect A2 and A3. If the user selects A2, then it should automatically deselect A1 and A3. I ...

javascriptjqueryhtmlmultiple-select

Posting data using the form method="post" in Vue does not seem to be working

My goal is to create a website that allows users to reserve a seat using a specific password and time slot. I've set up a form where users can input the password and their name, then submit the form to make the reservation. However, I'm facing an ...

javascripthtmlvue.js