Building a Sleek Hover Effect Dropdown Menu Using HTML and CSS

I've been following a tutorial on YouTube that showcases how to create a hoverable dropdown menu using HTML and CSS. The video link can be found below:

Youtube Video Tutorial: https://www.youtube.com/watch?v=9Qrs8p7WgCc

After replicating the code and watching the tutorial multiple times, I noticed discrepancies in the output compared to the creator's version. It seems that there might be differences due to the video being from 2017, particularly noticeable when adding {display:flex} under "nav ul" in our CSS.

Output After Applying {display: flex}

https://i.stack.imgur.com/zQeyp.jpg

Final Result Shown in the Video

https://i.stack.imgur.com/WiINQ.jpg

My Output Post {display:flex}

https://i.stack.imgur.com/MbavT.jpg

My Final Results

https://i.stack.imgur.com/0LcPb.jpg

My index.html Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="menu">
        <a href="#" class="brand"><img src="#" alt=""></a>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                    <ul>
                        <li><a href="#">List 1</a></li>
                        <li><a href="#">List 2</a></li>
                        <li><a href="#">List 3</a></li>
                    </ul>
                <li><a href="#">Services</a></li>
                    <ul>
                        <li><a href="#">List 1</a></li>
                        <li><a href="#">List 2</a></li>
                    </ul>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Pages</a></li>
                    <ul>
                        <li><a href="#">List 1</a></li>
                        <li><a href="#">List 2</a></li>
                        <li><a href="#">List 3</a></li>
                        <li><a href="#">List 4</a></li>
                </ul>
            <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </div>
    <section></section>
</body>
</html>

My styles.css

body {
margin: 0;
padding: 0;
}

section {
    width: 100%;
    height: 100vh;
    background: url(bg.jpg);
    background-size: cover;
}

.menu {
    position: absolute;
    width: 100%;
    background: rgba(255, 255, 255, .5);
    padding: 0 100px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.menu img {
    float: left;
    width: 84px;
}

nav {
    position: relative;
    float: right;
}

nav ul {
margin: 0;
padding: 0;
display: flex;
}

nav ul li { 
    list-style: none;
}

nav ul li a {
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    padding: 30px 20px;
    text-decoration: none;
}

nav ul li ul {
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, .5);
    min-width: 250px;
    position: absolute;
    margin-top: 1px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transition: .5s;
    transform: translateY(40px);
}

nav ul li:hover ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

nav ul li ul li a {
padding: 10px;
}

The source code provided in the tutorial should ideally yield similar results. Feel free to refer to the short video mentioned above for guidance. Thank you!

htmlcssdrop-down-menuflexbox

Answer №1

There is a CSS rule in place that requires a specific nested relationship: nav > ul > li > ul

nav ul li:hover ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

However, the HTML structure does not match this relationship:

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <ul>
        <li><a href="#">List 1</a></li>
        <li><a href="#">List 2</a></li>
        <li><a href="#">List 3</a></li>
    </ul>

The nested <ul> appears as a sibling of the <li>, rather than a child. To fix this issue, consider using the next sibling selector +:

nav ul li:hover + ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

Answer №2

Upon reviewing the video, it appears that there are several issues in your code. Specifically, there seems to be a problem with how you wrapped the list items and applied CSS styles.

body {
  margin: 0;
  padding: 0;
}

section {
  width: 100%;
  height: 100vh;
  background: url(bg.jpg);
  background-size: cover;
}

.menu {
  position: absolute;
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  padding: 0 100px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.menu img {
  float: left;
  width: 84px;
}

nav {
  position: relative;
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  display: flex;
}

nav ul li {
  list-style: none;
}

nav ul li a {
  display: block;
  text-transform: uppercase;
  font-weight: bold;
  padding: 33px 20px;
  text-decoration: none;
}

nav ul li a:hover {
  background-color: #184771;
  color: #fff;
}

nav ul li ul {
  display: block;
  background: rgba(255, 255, 255, 0.5);
  min-width: 250px;
  position: absolute;
  margin-top: 1px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  transition: 0.5s;
  opacity: 0;
  visibility: hidden;
}

nav ul li:hover ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

nav ul li ul li a {
  padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="test.css" />
  </head>
  <body>
    <div class="menu">
      <a href="#" class="brand"><img src="#" alt="" /></a>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li>
            <a href="#">About</a>
            <ul>
              <li><a href="#">List 1</a></li>
              <li><a href="#">List 2</a></li>
              <li><a href="#">List 3</a></li>
            </ul>
          </li>
          <li>
            <a href="#">Services</a>
            <ul>
              <li><a href="#">List 1</a></li>
              <li><a href="#">List 2</a></li>
            </ul>
          </li>
          <li><a href="#">Portfolio</a></li>
          <li>
            <a href="#">Pages</a>
            <ul>
              <li><a href="#">List 1</a></li>
              <li><a href="#">List 2</a></li>
              <li><a href="#">List 3</a></li>
              <li><a href="#">List 4</a></li>
            </ul>
          </li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
    <section></section>
  </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 are some ways to ensure a JQM-created button is clickable in Firefox?

I am working on making a div clickable in a jQuery Mobile powered website. The current code I have functions properly in Chrome and Safari, however, it does not work in Firefox - both on desktop and Android FF. <button data-icon="eye"> <a href ...

jquerycsshtmljquery-mobile

Is there a way to automatically scroll 50 pixels down the page after pressing a button?

Is there a way to make my page scroll down in Angular when a button is clicked? I attempted to use this code, but it didn't have the desired effect. What is the best method for scrolling the page down by 50px? window.scrollBy(0, 50); ...

htmlangulartypescriptscroll

Spinning an SVG path with CSS3 in a circular motion from its central axis

I have a collection of SVG paths, and one of them is displayed below: <path id="GOL" class="st0" d="M37.5,430.5l-12.4-12.4v-13.3h-4.2c-7.2,0-13.9,2.5-18.7,7.5c-4.7,4.9-7.3,11.3-7.3,18.3 c0,7,2.6,13.5,7.3,18.3c4.8,5,11.4,7.6,18.6,7.6l4.2,0v-13.7L36. ...

htmlcsssvgcss-animations

Arranging inline-flex elements within a div container

I have been struggling to position two elements side by side within a single div, where the second element should be on the right side. <div className={classes.container}> <div className={classes.first}> First </div> <d ...

cssflexboxmaterial-ui

unable to locate the nearest available table

This is my HTML code: <div id="dvUser"> <table id="tblUser" > <tbody> <tr> <td> <input class="sfCheckBox" type="checkbox" title="view" checked="checked"> </td> </tr> <tr> <td> <input class="sf ...

jqueryhtml

Choose an item from a list that does not have a particular class

Here is a list of items: <ul id='myList'> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li class='item-selected'>Item 4</li> <li>Item 5</li> & ...

javascriptjqueryhtmlcss

Align text in the middle of an image

I need some help with formatting my web page. I want to move the content of the red rectangle into the green rectangle, like in the image below: https://i.stack.imgur.com/sAved.jpg The goal is to center the text with the picture. I've tried using di ...

css

The ng-route feature seems to be malfunctioning and I am unable to identify the error, as no information is being displayed in the console

Here is the code in my boot.php file where I have set up the links <ul class="nav nav-pills nav-stacked"> <li role="presentation"><a href="#/valley">Valley</a></li> <li role="presentation"><a href="#/beach"> ...

javascriptphphtmlangularjs

Adjust transparency in Bootstrap slider with picture indicator

Currently, I am in the process of creating an HTML page featuring a Bootstrap carousel. To enhance user interaction, I have replaced the standard selector with images that, when clicked, will transition the slider to display corresponding content. In orde ...

htmlcssbootstrap-4bootstrap-carousel

Vanilla JavaScript: toggling text visibility with pure JS

Recently, I started learning javascript and I am attempting to use vanilla javascript to show and hide text on click. However, I can't seem to figure out what is going wrong. Here is the code snippet I have: Below is the HTML code snippet: <p cla ...

javascripthtmlcss

Dropping and dragging in the Dojo for the nested lists

Within my HTML code, I am using the Dojo drag and drop feature to sort attributes and move them to another section. However, I am having trouble figuring out how to sort the sections themselves. Here is the structure that I have created: <ul accept=" ...

javascripthtmlcssdojodrag-and-drop

Customize TYPO3 templates by modifying the div id structure

I have a template in TYPO3 that I want to use for multiple pages. Within this template, there is a specific DIV element. I am wondering if it's possible to change the ID of the DIV based on the page UID. This DIV is the only one that changes its cont ...

htmltypo3typoscript

What is the best way to send an HTML report through email with embedded images as an attachment?

Currently, I am in the process of generating a report using ExtentReports that will be distributed via email to team members who are outside of our domain. To capture screenshots of any test failures, I utilize a screenshot method which saves these images ...

javahtmlseleniumreportjakarta-mail

Stop horizontal overflow of content

This unique Vuetify demo on CodePen showcases a two-column layout. The first column contains a <v-list> enclosed in a green <v-alert>. By clicking the "toggle text" button, you can switch the title of the first list item between short and long ...

cssvue.jsvuetify.js

Tips for maximizing website performance on touch-enabled devices

When using a touch device such as an iPhone, iPad, or Android device, it can be challenging to accurately tap on small buttons with your finger. So far, there is no universal method in CSS media queries to detect touch devices. As a workaround, I check if ...

javascriptcsstouchdom-eventsusability

Exploring Javascript parameters with the power of jquery

Is it possible to pass a parameter from PHP into a JavaScript function within HTML? I am currently facing an issue where my code crashes when it reaches a certain condition. This is the code snippet causing the problem: $str="<input type='submit&a ...

phpjavascriptjqueryhtml

Presenting data in various formats

I've got a JSON file with a list of data that includes months and years. I want to display all the months, but have the year only appear once in a big block area. Here's an image example: https://i.stack.imgur.com/Ps3OF.png The image demonstrates ...

htmljsonangulardata-manipulation

AngularJS 1: Dynamically updating input values in real-time

Hey everyone, I'm experimenting with Angular and have encountered a roadblock. I am trying to assign values to an input element using ng-repeat for a list of parameters. <input type="text" ng-model="parameters.inParameterName" class="form-control ...

htmlangularjsangular-ngmodel

Embedding a video element results in an unexpected increase in height

When I insert an HTML5-Video element into a div, it results in the wrapper having a height larger than the video itself. The wrapper is 7px taller than the actual video source, without any min-height set. Check it out! (Scroll down to the Video) The vide ...

htmlcsshtml5-video

Concealing and wrapping text using CSS in a table structure

My table is displayed below: <table style="width: 100%; white-space: nowrap; overflow: hidden;"> <tbody><tr> <th> Department </th> <th> Function </th> ...

htmlcss