What could be wrong with my hover command not functioning properly?

I've been attempting to create a dropdown menu using some basic CSS, but I can't figure out why the dropdown isn't functioning. I've tried everything I can think of. Below, I've included the CSS and HTML code for reference:

   <ul><li>Home</li>
  <li>Crockery</li>
  <li>
    Cutlery
    <ul>
      <li>Kings</li>
      <li>Bead</li>
      <li>Tableware</li>
    </ul>
  </li>
  <li>Glassware</li>
  <li>Contact</li>
</ul> 

Here is the CSS code:

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 20px 50px 150px;
  font-size: 13px;
  text-align: center;
  background: #E3CAA1;
}

ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
ul li:hover {
  background: #555;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
}

Answer №2

To enhance your code, you should incorporate the use of visibility, z-index, and opacity similar to the following sample:

  ul li:hover ul {
    display: block;
    visibility: visible;
    z-index: 12;
    opacity: 1;
  }

Implementing this code will render the submenu visible when the user hovers over the first-level menu item, utilizing pseudo-class-selectors

Feel free to explore a functional demo here.

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

Utilizing the value selected in a form to trigger an action method without the use of a query

I am currently utilizing pug to generate pages for my nodeJS server. In this particular case, I am attempting to use the value selected in a form select option to dynamically change the action method. Essentially, the goal is to utilize the group name sel ...

Secure Your PHP Accounts

My current website hides the account window where users can change passwords, upload files and more using a simple code snippet: <?php if($is_logged_in) { ?> <div id="account_window"> //content </div> <?php } ?&g ...

Tips for implementing a method to switch CSS properties of a main container by using a checkbox within its child element in a Svelte component

It took me a while to figure this out, but I still feel like my implementation is not ideal. I'm confused as to why things break when I remove the checkedActivities.has(activity) ? "checked" : "unchecked", because I thought TypeScr ...

In my opinion, CSS3 transform translateZ can be likened to scaling in some way

There are instances where I believe that the translateZ and scale properties produce similar effects, akin to zooming in or out. I suspect there is a mathematical relationship between them. If I know the value of one, such as translateZ(-1000px), along wi ...

adjust highcharts chart size to fit screen width

Has anyone experienced issues with setting an explicit width of 400px on a chart? I am facing difficulties as the chart gets cut off instead of scaling down to that size. My main concern is having it resized properly for an iPhone mobile site. Can anyone ...

A step-by-step guide on customizing the background color of the selected date in the MUI DatePicker

I am looking to customize the background color of selected dates in a MUI datePicker. In the image below, you can see that I want to change the blue color to a different color. Here is my code: const customStyles = makeStyles(theme => ({ datePickerC ...

What are the steps to create a horizontal submenu in WordPress?

Is there a way to change the default vertical sub menu of my main menu to horizontal? The CSS for the sub menu in stylesheet.css is as follows: .main-nav>ul>li .sub-menu> li { padding:0 20px; } .main-nav>ul>li .sub-menu> li:first-ch ...

how to show an error in a modal window when encountering an error

Using Blazor and Blazorstrap, typically when the server disconnects, an "Error" message is displayed. However, with the BsModal from Blazorstrap, it appears in the background layer, making it unresponsive. How can this be fixed? Is it possible to close the ...

Stop all animations in JS and CSS

Looking for a way to halt all CSS and JavaScript animations, including canvas and webGL effects, on a specific webpage. Some animations can cause slow performance on certain browsers like Opera and Firefox, so I'm seeking a code snippet or guidance o ...

Utilize the <wbr> tag within FormattedMessage and assign it as a value while coding with TypeScript

Trying out the optional word break tag <wbr> in a message within <FormattedMessage id="some:message" />. Context Some words or texts are too lengthy for certain parent elements on smaller mobile screens, and we have a column layout t ...

What is the best way to choose a range of nodes with dynamic limitations without relying on static positions?

<li></li> <th> <li></li> <strong>"Jeff"<strong> <li></li> <a>"Mary"<a> <li></li> <th> <li></li> <strong>"Rich"<strong> <li></li&g ...

Tips for concealing password input in an HTML form

Is it possible to echo the password variable into an input field in a form without displaying any password characters in the HTML source code? The purpose is for the form to be able to post the password without revealing it. Any ideas on how to accomplis ...

The size of the panel header does not seem to be adjusting as expected within the React

I need help adjusting the header size in a React-Bootstrap Panel within a Typescript application. I've tried wrapping the text in <h1> tags as specified in the documentation, but there seems to be no change. Even with attempts to add inline sty ...

Converting HTML and CSS to PDF in Java using iText

I've been working on converting HTML to PDF. Initially, I transformed my HTML code into XHTML using the resources provided in this link: After successfully displaying the generated XHTML code in a browser by creating an HTML file for testing purposes ...

Creating unsightly class names using Node.js

Is it possible to automatically create random and unattractive class names? For example, is there a tool or plugin that can substitute the .top-header class with something like .a9ev within my CSS code? It would also be ideal if the class name in the HTML ...

Disappear solely upon clicking on the menu

Currently, I am working on implementing navigation for menu items. The functionality I want to achieve is that when a user hovers over a menu item, it extends, and when they move the mouse away, it retracts. I have been able to make the menu stay in the ex ...

Focusing in on a PARTICULAR SECTION of the picture

My website has a unique concept - comparing two articles side by side. One of the articles is mine, while the other is displayed alongside it. To capture entire pages for comparison, I utilize Google's GoFullPage feature to take screenshots. The goa ...

Singling out a particular navigation tab

When attempting to link specific table IDs so that the corresponding tab is active when opened (i.e. www.gohome.com/html#profile), I am facing an issue where the active tab remains unchanged. Even after specifically calling out tab IDs, there seems to be n ...

Unable to properly receive email address and attachment in PHPMailer

I am facing an issue with sending emails with attachments using PHP. The problem I encounter is that the email address and attachment are not being properly received in my code. While manually providing the email address results in successful email sending ...

Ways to obtain data in JavaScript function from HTML

Struggling to pass the key from a database query in HTML using PHP to a JavaScript function? You're not alone. The challenge lies in passing the field_id to the updateRecords() JS function through the onClick() event of an HTML button. Previously, se ...