CSS dropdown menu not displaying submenus when hovered over

Having issues with a CSS drop-down menu not showing sub-menu on hover? Let's dig into the real problem at hand. Check out the HTML and CSS snippets below or visit this JSFiddle link.

It seems like the display: block; property is not taking effect as expected.

body {
  background-color: #eee;
  padding: 0;
}
.inline-menu,
.inline-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.inline-menu > li {
  display: inline-block;
  padding-right: 25px;
}
.inline-menu a {
  text-decoration: none;
}
.inline-menu > li > ul {
  display: none;
}
.inline-menu > li > ul:hover {
  display: block;
}
<nav>
  <span class="logo"></span>

  <ul class="inline-menu left-menu">
    <li><a href="">L-A</a>
      <ul>
        <li><a href="">1</a>
        </li>
        <li><a href="">2</a>
        </li>
      </ul>
    </li>
    <li><a href="">L-B</a>
      <ul>
        <li><a href="">1</a>
        </li>
        <li><a href="">2</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

htmlcssdrop-down-menu

Answer №1

Applying the hover effect to the correct element is crucial for proper functionality. Make sure to use the following code:

.inline-menu > li:hover > ul{
    display: block;
}

Instead of using 

.inline-menu > li > ul:hover

body{
    background-color: #eee;
    padding: 0;
}

.inline-menu,
.inline-menu ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.inline-menu > li{
    display: inline-block;
    padding-right: 25px;
}

.inline-menu a{
    text-decoration: none;
}

.inline-menu > li > ul{
    display: none;
}

.inline-menu > li:hover > ul{
    display: block;
}
<nav>
  <span class="logo"></span>

  <ul class="inline-menu left-menu">
    <li><a href="">L-A</a>
      <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
      </ul>
    </li>
    <li><a href="">L-B</a>
      <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
      </ul>
    </li>
  </ul>
</nav>

Answer №2

* {
  margin: 0;
  padding: 0;
}
#menu ul {
  list-style: none;
}
#menu ul li {
  float: left;
  width: 150px;
  height: 50px;
  background-color: #0C3;
  border: 1px solid #FFF;
  text-align: center;
  line-height: 50px;
  position: relative;
}
#menu ul li a {
  color: #CC0;
  display: block;
  text-decoration: none;
}
#menu ul li a:hover {
  background: #C30;
  color: #FFF;
}
#menu ul ul {
  display: none;
  position: absolute;
}
#menu ul li:hover> ul {
  display: block;
}
<div id="menu">
  <ul>
    <li><a href="#">L-A</a>
      <ul>
        <li><a href="#">A</a>
        </li>
        <li><a href="#">B</a>
        </li>
      </ul>
    </li>
    <li><a href="#">L-B</a> 
      <ul>
        <li><a href="#">C</a>
        </li>
        <li><a href="#">D</a>
        </li>
      </ul>
    </li>
    </li>
</div>
</div>

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

Encountering a challenge when trying to showcase data from a saved .txt file within a bootstrap card

I encountered a minor problem in my PHP project. I developed a small application that allows users to fill out form fields and stores all the data in a .txt file. Simultaneously, the entered data is displayed below the form with specific details such as fi ...

phphtmlbootstrap-5

Bringing data from HTML into Matlab via a table

I need assistance with importing data from an HTML webpage into Matlab. I've tried using the "getTableFromWeb" function, but it doesn't seem to be working as expected. When I view the data in a browser like Firefox, everything appears fine. Howev ...

jqueryhtmlmatlaburlreadimport-table

Images in the center with a div overlay on top

I'm attempting to place a div or span on top of an image that is positioned above another image. Both images are centered and resized to fit. The height of my images is greater than the width, but they are not set at a fixed size. I want the div to pe ...

htmlcss

Implement jQuery to reset the margin of elements to 0 when scrolling occurs

I'm currently working on a website with a navigation bar that has a height of 170px. Below this navigation bar is a fixed position sidebar. My goal is to make the sidebar appear as if it "catches" at the top of the browser after the user scrolls 170px ...

jquerycssmarginfixedsidebar

Validation for HTML5 does not appear when inputmask is used for entering mobile numbers

One problem that I have encountered is when using the input type = "text" with required = "required" for a mobile number along with an input mask. In this scenario, if a user does not enter any value, the HTML5 validation message does not appear. Instead, ...

jqueryhtmlvalidationjquery-inputmaskinput-mask

The font used in the production build of Next.js differs from the font used in the development build

It's evident from the images provided that the font used in my Production Build and Development Build for my Next.js webpage is different. Upon running npm run build and npm start to test the production build, the Montserrat Font disappears from the w ...

cssnext.js

Dimension of images within bootstrap column division

I have a layout with three columns using col-md-4 for a thumbnail design, and then I have another page with col-md-8. In both cases, I need to display an image. Should I use the same image for both layouts or would it be best to have two separate images, e ...

htmlcsstwitter-bootstrap

I'm trying to understand why this code isn't running properly. Can someone explain why my CSS is not being executed?

For some reason, using button .order{} to select elements inside the button is not applying the CSS codes as expected. The text color remains unchanged. However, when using just `.order` to select the elements, the CSS code works perfectly fine. Can someon ...

htmlcss

Is there a way to set a default CSS background image using JavaScript in case the specified

When working with regular CSS, I can easily set a fallback image using this code in case the primary image is not available: .container { background-image: url(pics/img.webp), url(pics/img.png); } But when it comes to setting styles in JavaScript (such ...

javascriptcssreactjsimagefallback

How to Integrate a DIV Table with Ajax.BeginForm in MVC4

My goal is to integrate a div table with Ajax.BeginForm: This combination will generate the following structure: <div class="Table"> <div class="Title"> <p>This is a Table</p> </div> <div class="Heading"> & ...

cssajaxasp.net-mvc-4html

Attempting to switch class after an asynchronous request

I am attempting to switch between 2 classes after making an ajax call, but I keep encountering this error: TypeError: toggleButton.children(...)[0].toggleClass is not a function Here is the code I am using: console.log(toggleButton.children()['0&ap ...

jqueryhtmlajax

Creating a new webpage with a custom URL in a React application

After receiving an HTML file from the server, the application displays the data (responseToPost) on the page using the following code: <div dangerouslySetInnerHTML={{ __html: this.state.responseToPost }} /> I am interested in creating a new URL wher ...

javascripthtmlreactjsdangerouslysetinnerhtml

Sending PHP data to an email composed in HTML

When sending an HTML email to my users using inlined CSS mixed with the HTML, I encounter a problem. How can I pass my variables from PHP to the HTML and use them accordingly when sending the email? For example, the email is supposed to contain the user&ap ...

phphtmlcss

A guide to traversing a class and pinpointing each element that contains a particular classlist property

Here is my code snippet that generates 4 spans within a class. When a user clicks on a span, it changes color to indicate that it has been clicked. <head> <style> .tagger1010 span { padding: 6px 10px; ...

javascripthtmlcss

Output the result of a MySQLI query using PHP's echo function

I am attempting to output my PHP while loop within an html echo. Essentially, I want to echo within another echo. Is this achievable? Below is the code snippet: <?php session_start(); require 'config.php'; if (@$_SESSION['username&ap ...

phphtmlmysqlecho

Tips for applying unique CSS classes to individual templates in Joomla

I manage a website at www.kadamjay.kg using an RT template system where each language version has its own unique template. However, when I add a class to a specific element, it only changes on one template and there are no additional templates in the pat ...

cssclasstemplatesjoomla

Implementing an active state for the 'a' tag within Bootstrap 5 nav-tabs in an MVC application can be achieved by utilizing ActionLink

In my .NET MVC application, I am utilizing Bootstrap 5.1 to create navigation tabs with 'a' tags generated via ActionLink. <ul class="nav nav-tabs"> <li class="nav-item"> @Html.ActionLink("Enti ...

htmlasp.net-mvcbootstrap-5

The JavaScript function does not function properly when it is called from another function

I tried my hand at creating a simple website for personal use, where I could input and edit text in an organized manner. A key feature I wanted was the ability to add new text fields dynamically by clicking a button, but it turned out to be more challengin ...

javascripthtmlcss

Prevent the sidebar from collapsing or disappearing when the viewport is less than 768px in Bootstrap

Utilizing the Bootstrap classes side-nav and nav-sidebar, I have created a side navigation bar. However, there is an issue - when the viewport is less than 768px, the side navigation bar disappears. Below is the snippet of my HTML code: <ul class="nav ...

htmlcsstwitter-bootstrap

Stop Google from indexing content that is loaded through ajax requests

Our website utilizes Ajax calls to load duplicate content. This method helps enhance user experience by avoiding the need to reload the entire page when users click on the menu. Although this technique works efficiently, the Ajax-loaded content is essenti ...

htmlajaxindexing