HTML drop-down menu malfunctioning/missing from view

I am encountering an issue where the drop-down menu is visible, but when I try to make it disappear and then hover over it again to bring it back, it does not reappear. Here is the CSS code I am using:

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: black;
    background-size: cover;
}

nav {
    width: 100%;
    height: 60px;
    background-color: #fff;

}

nav p {
    font-family: arial;
    color: #222;
    font-size: 22px;
    line-height: 55px;
    float: left;
    padding: 0px 20px;

}

nav ul {
    float: left;

}

nav ul li {
    float: left;
    list-style: none;
    position: relative;

}

nav ul li a {
    display: block;
    font-family: arial;
    color: #222;
    font-size: 14px;
    padding: 22px 14px; 
    text-decoration: none;

}

nav ul li ul {
    display: none;
    position: absolute;
    background-color: #fff;
    padding: 10px;
    border-radius: 0px 0px 4px 4px;

}

nav ul li:hover ul {
    display: block;

}


nav ul li ul li {
width: 180px;
border-radius: 4px;

}


nav ul li ul li a {
padding: 8px 14px;

}

nav ul li ul li a:hover {
background-color: #f3f3f3;

}

After adding 'display: none', the menu disappears and doesn't return as expected. Can someone please assist me with this issue? I am following instructions from a Youtube video: https://www.youtube.com/watch?v=rgUp302f_lY&t=837s

htmlcss

Answer №1

The issue lies with the spacing in nav ul li: hover. It should be

nav ul li:hover ul {
  display: block;
}


* {
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
}

nav {
  width: 100%;
  height: 60px;
  background-color: #fff;
}

nav p {
  font-family: arial;
  color: #222;
  font-size: 22px;
  line-height: 55px;
  float: left;
  padding: 0px 20px;
}

nav ul {
  float: left;
}

nav ul li {
  float: left;
  list-style: none;
  position: relative;
}

nav ul li a {
  display: block;
  font-family: arial;
  color: #222;
  font-size: 14px;
  padding: 22px 14px;
  text-decoration: none;
}

nav ul li ul {
  display: none;
  position: absolute;
  background-color: #fff;
  padding: 10px;
  border-radius: 0px 0px 4px 4px;
}

nav ul li:hover ul {
  display: block;
}

nav ul li ul li {
  clear: both;
  width: 180px;
  border-radius: 4px;
}

nav ul li ul li a {
  padding: 8px 14px;
  display: block;
}

nav ul li ul li a: hover {
  background-color: #f3f3f3;
}
<nav>
  <ul>
    <li><a href="#">Single</a></li>
    <li><a href="#">Dropdown</a>
      <ul>
        <li><a href="#">Child 1</a></li>
        <li><a href="#">Child 1</a></li>
        <li><a href="#">Child 1</a></li>
      </ul>
    </li>
  </ul>
</nav>

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

Adjusting nearby parts when hovering in CSS

I'm curious as to why the size of the second div does not change when hovering over the third div, unlike when hovering over the first div. #block { width: 50%; white-space: nowrap; } .div { display: inline-block; text-align: center; } di ...

htmlcss

Can a hashmap variable be declared in HTML code?

Can a hashmap variable be set in HTML code? Here's an example: <form name="f1234"> <input type="text" name="map['foo1']" value="dog" /> <input type="text" name="map['foo2']" value="cat" /> </form> < ...

htmlhashmap

Guide to setting up a nested vuetify navigation drawer

I am facing a scenario where I have one fixed navigation drawer with icons and another dynamic navigation drawer that should open and close adjacent to the fixed one without overlapping. The current implementation is causing the dynamic drawer to overlap t ...

javascriptcssvue.jsvuetify.js

Scroll issue causing CSS not to be applied to a field within a div

Can someone help me with this issue I'm facing in my jsfiddle example? Here is the link: http://jsfiddle.net/AnnaMiroshnichenko/xjyb8/1/. The problem is, when I scroll the div, the field underneath the scroll does not appear to be applying CSS rules p ...

csshtmlsafariscrollmobile-safari

Ensure that the images in the final row of the flexbox gallery are consistent in size with the rest

I'm working on creating a CSS flex image gallery that adjusts the width of the images based on the container size: HTML: <div class="grid-container"> <div class="grid-item"> <img src="small-thumb-dpi.jpg" /> < ...

htmlcssflexboximage-gallery

Ensuring the text is positioned centrally and at the bottom of a table cell

Is there a way to center and align text at the bottom of a cell in table? This is my desired layout: ...

htmlcsscss-tables

Guide to setting up a node.js server that serves HTML files with CSS styling

I am currently working on setting up a simple node.js server for my HTML using http and express. Everything is functioning properly, but the CSS is not displaying as expected. Here is the code snippet for my server setup: const express = require("express ...

htmlcssnode.jshttpserver

A structured HTML table featuring a secure header and stable left-hand columns, complete with knockout controls embedded in both the header and first

I'm facing a challenge with a customizable HTML table: Each row has a checkbox (knockout bound) to allow the user to determine if it should be included or not. The header columns also have checkboxes (knockout bound) to indicate if a particular ...

htmlknockout.jshtml-tablesticky

Preserving the selected options in a dynamically populated dropdown list after submitting a form using php

I am attempting to preserve form values even after submitting the form. document.getElementById('start_date').value = "<?php echo $_POST['start_date'];?>"; document.getElementById('end_date').value = "<?php echo $_P ...

javascriptphpjqueryhtml

An issue arose while attempting to retrieve information based on the specified ID within the database

I am facing a challenge that I need help with, I have a webpage that displays questions fetched from a database and I have created a comments section for each question. How can I retrieve comments based on the post_id? I attempted to fetch them as usual bu ...

phphtmlmysqllaravel

Uniquely tag an uploaded file

My code for uploading files is as follows: var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgress, false); xhr.open("POST", requestUrl, true); xhr.send(f); I want to draw your attention to the fact that I have attached a l ...

javascripthtml

What is the method to send an email with an embedded image using C# without the presence of ATT00001.bin file

Currently, I can successfully send emails using SMTP in C# and even include images as LinkedResource. However, the issue arises when recipients receive emails with ATT0000X.bin files attached. How can I prevent these bin files from being included in the em ...

c#htmlsmtpsmtpclient

working with html data in a bootstrap modal using javascript

Utilizing an id, I pass data to a bootstrap modal and link that id with stored data. $("#fruit").html($(this).data("fruit")); In addition, I am appending data to the bootstrap modal $('#mymodal').find('.modal-body').append('< ...

javascriptjqueryhtmltwitter-bootstrap

Verify if there is a date present within the JSON entity

I have a PHP array containing date strings and I want to validate them using a native HTML5 date input element. To achieve this, I have converted the date array into a JSON object for use with JavaScript: <script> var date_array = <?php echo json ...

javascriptjsonhtmldateobject

Discover the method to retrieve the month name from an HTML Date input value

Here we have a date input field <input id="customer-date" name="customer-date" type="date" required> Accompanied by this script const customerDate = document.getElementById('customer-date').value; const dateHandler = document.getElementB ...

javascripthtmldate

Convert a String to JSON using either JavaScript or jQuery

Currently, I am developing a JavaScript animation script and I am aiming to allow individuals to define behavior declaratively within the HTML. This is the format I envision for my HTML: <div data-animation="top: 600, left: 600, opacity: 1, start: 0.2 ...

javascriptjqueryhtmljson

Tips for repairing a button using a JavaScript function in an HTML document

I am currently working on extracting titles from body text. To achieve this, I have created a button and linked my function to it. The issue I am facing is that when I click on the button, it disappears from its original position. I intend to keep it in pl ...

javascripthtmlcss

Lagging speeds in client-side template rendering using Rivets.js

I have a function that renders an array of around 1000 objects, but the html bindings are causing significant performance issues. It currently takes about 5 seconds to complete rivets.bind(). Does anyone have any recommendations for improving performance? ...

javascriptjqueryhtmltemplatingrivets.js

The pictures are not showing up in the photo album

I am currently in the process of building a swim image gallery inspired by the Flex Panel Gallery project from Javascript30 (Repo Link). Upon previewing the site in a browser, I encountered an issue where the images extend beyond the frame, leaving only t ...

javascripthtmlcssflexboximage-gallery

Looking to create a div in HTML with two columns and two rows for display

Query: I am facing issues adjusting these grids using HTML and CSS. I have attempted to place them in a single frame within a separate div, but it's not working as expected. I need help aligning the grids according to the provided image below. Can som ...

htmlcssbootstrap-4