The drop-down menu is not showing up when I hover over it in my CSS/HTML design

Hey there, I'm having an issue with my drop-down menu. When I hover over it, nothing happens. Can anyone please help me figure out what's wrong? I tried changing the visibility from hidden to display none/block when hovering, but it doesn't seem to make a difference.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Merriweather", serif;
}

nav {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.logo {
  font-size: 30px;
}

.navitems {
  display: flex;
  list-style: none;
  gap: 50px;
  font-size: 20px;
  text-transform: uppercase;
}

.drophover {
  position: relative;
}

.dropmenu {
  position: absolute;
  top: 80px;
  list-style: none;
  line-height: 60px;
  text-align: left;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
  padding: 10px;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

.drophover:hover .dropmenu {
  opacity: 1;
}
<header>
  <nav>
    <h1 class="logo">Morroco.</h1>
    <ul class="navitems">
      <li class="drophover">Découvrir le Maroc</li>
      <ul class="dropmenu">
        <li>Histoire & Géographie</li>
        <li>Art & Culture</li>
        <li>Téchnologie</li>
      </ul>
      <li>Destinations</li>
      <li>Infos Pratique</li>
      <li>Nous Contacter</li>
    </ul>
    <i><img src="/img/menu_FILL0_wght400_GRAD0_opsz48.svg" alt="" /></i>
  </nav>
</header>

I've attempted adjusting the opacity and visibility using display none and display block on hover, but unfortunately, there is no change.

htmlcssfrontend

Answer №1

To choose the dropmenu, make use of the sibling selector method:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Merriweather", serif;
}

nav {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.logo {
  font-size: 30px;
}

.navitems {
  display: flex;
  list-style: none;
  gap: 50px;
  font-size: 20px;
  text-transform: uppercase;
}

.drophover {
  position: relative;
}

.dropmenu {
  position: absolute;
  top: 80px;
  list-style: none;
  line-height: 60px;
  text-align: left;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
  padding: 10px;
  opacity: 0;
  transition: 200ms ease-in-out;
}

/* 👇 Apply CSS sibling selection here */
.drophover:hover + .dropmenu {
  opacity: 1;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="/css/maroc.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet" />
</head>

<body>
  <header>
    <nav>
      <h1 class="logo">Morroco.</h1>
      <ul class="navitems">
        <li class="drophover">Discover Morocco</li>
        <ul class="dropmenu">
          <li>History & Geography</li>
          <li>Art & Culture</li>
          <li>Technology</li>
        </ul>
        <li>Destinations</li>
        <li>Practical Information</li>
        <li>Contact Us</li>
      </ul>
      <i><img src="/img/menu_FILL0_wght400_GRAD0_opsz48.svg" alt="" /></i>
    </nav>
  </header>
  <main></main>
  <footer></footer>
</body>

</html>

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

What is causing my button to act in this way?

Initially, the website redirects to an undefined URL and then to test.com. I am looking for a way to implement a redirection sequence from to and finally to <head> <script type="text/javascript"> <!-- function popup(url ...

javascripthtmlfunctionpopup

Enhance visual content using JavaScript to filter images in React

I am currently developing a React app with multiple pages that are being imported into another component page. The structure of one of my pages looks like this: export default class Product1 extends React.Component { render() { return ( <di ...

javascripthtmlreactjs

Scrapy and xpath not functional - solely relying on css for operation

Attempting to scrape data from this website: After retrieving all elements using the following code: products = response.xpath("//ul[@class='products']//ancestor::li") I attempted to extract prices for all elements in the scrapy shell ...

cssxpathscrapy

What are the best methods for aligning images both horizontally and vertically in Bootstrap 4?

Currently utilizing the most recent version of Bootstrap 4, I have established a 400px div to contain images of heights ranging from 100px to 350px. Despite successfully centering the image horizontally with this code: <img src="..." class="mx-auto d-b ...

csshtmlimagecenteringtwitter-bootstrap-4

When you click on the "email" link, the Email app will automatically launch

Is there a way I can make the "EMAIL" text clickable in HTML, so that it automatically opens an email app or site and inserts the clicked email into the "To:" field? ...

javascripthtml

Creating a link with a POST method and without using a new line

I am attempting to generate a square matrix and send data using the post method. I have discovered a solution involving JavaScript and form submission, but each time a new form is created, it results in a new line being added. Alternatively, if I move th ...

javascripthtmlhref

The child element with the specified position within the id element

Is it possible to highlight 'The second paragraph' of p id="dd" using nth-child? I noticed that when I add "#dd" in styles, it stops working properly. <!DOCTYPE html> <html> <head> <style> #dd p:nth-child(3) { back ...

htmlcsscss-selectors

Upgrade ngf-select to work with Angular 8 versions

Currently in the process of transitioning from AngularJS to Angular 8. Looking for guidance on how to update the following code snippet for Angular 8: <button class="other-button contactUsSpecific" type="button" (change)="contactCtrl.uploadFile ...

htmlangularjsangularangular8

Unable to detect any errors in the CSS file

Using RSpec to write some feature tests, I encountered an error in my application where a pre-purchased template with numerous styles is causing issues. Upon running the specs, the following error occurred: ActionView::Template::Error: Invalid CSS ...

cssrspecsasscapybara

What could be causing the lack of population in ngRepeat?

In my angular application, I encountered an issue with ngRepeat not populating, even though the connected collection contains the correct data. The process involves sending an http get request to a node server to retrieve data, iterating over the server&a ...

javascriptangularjshtml

Enhance the appearance of React.Fragment with custom styling

When working with React, my components adhere to a specific file structure schema: - componentName |- componentName.tsx |- componentName.scss Some of these components are wrapped with a <React.Fragment>, like this: render() { return ( &l ...

javascriptcssreactjs

Unable to successfully implement float:right on all elements

I may not be a CSS expert, but I thought this would be simple. Unfortunately, my code isn't producing the desired outcome. Below is the code snippet: <div class="form-group" style="float:right;"> <p><asp:Button ID="Submit" Text="L ...

htmlcssasp.netcss-float

"Enhance Your Website with Slider Swipe Effects using CSS3 and

After scouring the internet for various types of sliders, including swipe sliders, I am interested in creating a responsive swipe slider specifically for mobile phones. This would be a full page swipe slider where users can swipe left and right seamlessly. ...

javascriptphphtmlcss

Are Struts 2 and HTML elements compatible?

I have created a Struts2 form with the following structure: <s:form > <s:select list="#session.circleIdNameMap" label="Select Circle:" headerKey="-1" headerValue="Select Circle" id=" ...

javajqueryhtmljspstruts2

Firing an event when a user reaches a particular element by scrolling using jQuery

I have a situation where I need to detect when an h1 element is in the user's view on a website... <h1 id="reach-here">FIRE ALERT WHEN REACHED</h1> and my goal is to display an alert message when the user scrolls to and sees the h1 headi ...

javascriptjqueryhtmlscrollscrollto

Guide on how to initiate a file download with text area content by clicking an HTML button

I came across this code snippet on GeeksforGeeks, and it partially solves an issue I was facing. <script> function download(file, text) { //creating an invisible element var element = document.createElement('a'); ...

javascriptphphtmljquerycss

HTML- Any suggestions on how to troubleshoot my sticky navbar not functioning properly?

I'm having trouble creating a sticky navbar. I've attempted to use z-index: 999 but it's not behaving as expected. * { margin: 0; padding: 0; } .navbar { display: flex; align-items: center; justify-items: center; position: ...

javascripthtmlcss

What could be causing the border around my three.js canvas?

I'm utilizing a version of this code on my website and I have customized it to have a transparent background with only particles visible on the webpage. However, I've noticed a thin border around the canvas where these particles are displayed, ap ...

javascripthtmlthree.js

The white background of the .jpg image is conflicting with the white background of the HTML

My website has a top-of-page .jpg image that was created with a white background. However, when using the img src="topOfEveryPageImage.jpg" tag, the white background of the image appears visually different from the rest of the solid white background on the ...

htmljpeg

Is there a way to reset my div back to its initial background color when clicked a second time?

I am currently utilizing the jQuery addClass and removeClass animate feature for my project. Basically, what is happening is that when the user clicks on a particular link, a dropdown navigation will appear. This feature is essential for ensuring responsi ...

jqueryhtmlcssaddclassremoveclass