Troubleshooting: HTML drop-down menu experiencing malfunctions

As a newcomer to the realm of HTML, I am eager to kickstart my online portfolio. After successfully setting up the navigation bar, I have now turned my focus towards creating a dropdown menu within the nav bar. Unfortunately, I've hit a roadblock as the items are not behaving as expected in the dropdown menu. It seems like the container setup might be off. Any help or advice would be greatly appreciated!

/* Updated styling for navbar and dropdown */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<META name="viewport" content="width=device-width, initial-scale=1">
<title> My Online Portfolio </title>
<link rel="stylesheet" href="dropdown.css">
<link href='http://fonts.gooleapis.com/css?family=Oswald'
rel='stylesheet' type='text/css'>

</head>
<body background = "background_image.jpg">
<body  class="About Me">
<header>
<div class="nav">
<ul>
<li><a href="#">About Me</a></li>
<li>
<div class="dropdown">
  <button class="dropbtn">Portfolio</button>
  <div class="dropdown-content">
<a href="#">Graphics</a>
<a href="#">Other</a>
  </div>
</div>
</li>
<li><a href="#"><nobr>Future Work</nobr></a></li>
</ul>
</div>
</header>
</div>
</body>
</html>
htmlcss

Answer №1

Within the dropdown class element, you will find the element with the dropdown-content class. Thus, what you need to target is actually 

.dropdown:hover .dropdown-content
.

Your current code (using the + character) instructs your browser to look for an adjacent sibling instead of a child element, which does not align with your requirements.

Here is the corrected code snippet:

/* nav bar */
body {
  margin: 0;
  padding: 0;
  
}
 
.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 15;
  margin: 0;
}
.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  height: 40px;
  padding-right: 40px;
  border-bottom: 1px solid #888;
}
 
.nav a {
  text-decoration: none;
  color: #fff;
  display: block;  
  transition: .3s background-color;
}
 
.nav a:hover {
  background-color: #005f5f;
}
 
.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}
 
@media screen and (min-width: 600px) {
  .nav li {
    width: 150px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
  }
 
  /* Option 1 - Display Inline */
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }
 
  /* Options 2 - Float
  .nav li {
    float: left;
  }
  .nav ul {
    overflow: auto;
    width: 600px;
    margin: 0 auto;
  }
  .nav {
    background-color: #444;
  }
  */
  
  /*****************************************************************/
  /*Dropdown for portfolio tab */
  /*****************************************************************/
  /* Dropdown Button */

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<META name="viewport" content="width=device-width, initial-scale=1">
<title> Will's Portfolio </title>
<link rel="stylesheet" href="dropdown.css">
<link href='http://fonts.gooleapis.com/css?family=Oswald'
rel='stylesheet' type='text/css'>


</head>
<body background = "http://2.bp.blogspot.com/-Xmo26BMqg5Q/UihlqVwTwgI/AAAAAAAAAv0/V-Rrgm0V6oo/s1600/Top+10+best+Simple+Awesome+Background+Images+for+Your+Website+or+Blog3.jpg">
<body  class="About Me">
<header>
<div class="nav">
<ul>



<li><a href="#">About Me</a></li>

<li>
<div class="dropdown">
  <button class="dropbtn">Portfolio</button>
  <div class="dropdown-content">
<a href="#">Graphics</a>
<a href="#">Other</a>

  </div>
</div>
</li>
<li><a href="#"><nobr>Future Work</nobr></a></li>
</ul>
</div>


</header>
</div>




</body>
</html>

Answer №2

The problem lies in the CSS selector you are using:

.dropdown:hover + .dropdown-content {
    display: block;
}

It should actually be:

.dropdown:hover .dropdown-content {
    display: block;
}


/* Styling for navigation bar */
body {
  margin: 0;
  padding: 0; 
}

.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 15;
  margin: 0;
}
.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  height: 40px;
  padding-right: 40px;
  border-bottom: 1px solid #888;
}
.nav a {
  text-decoration: none;
  color: #fff;
  display: block;  
  transition: .3s background-color;
}
.nav a:hover {
  background-color: #005f5f;
}
.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}
@media screen and (min-width: 600px) {
  .nav li {
    width: 150px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
  } 
  /* Option 1 - Display Inline */
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }
  /*****************************************************************/
  /* Dropdown styling for portfolio tab */
  /*****************************************************************/
  /* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}   

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<META name="viewport" content="width=device-width, initial-scale=1">
<title> Will's Portfolio </title>
<link rel="stylesheet" href="dropdown.css">
<link href='http://fonts.gooleapis.com/css?family=Oswald'
rel='stylesheet' type='text/css'>

</head>
<body background = "http://2.bp.blogspot.com/-Xmo26BMqg5Q/UihlqVwTwgI/AAAAAAAAAv0/V-Rrgm0V6oo/s1600/Top+10+best+Simple+Awesome+Background+Images+for+Your+Website+or+Blog3.jpg">
<body  class="About Me">
<header>
<div class="nav">
<ul>
<li><a href="#">About Me</a></li>
<li>
<div class="dropdown">
  <button class="dropbtn">Portfolio</button>
  <div class="dropdown-content">
<a href="#">Graphics</a>
<a href="#">Other</a>
  </div>
</div>
</li>
<li><a href="#"><nobr>Future Work</nobr></a></li>
</ul>
</div>
</header>
</div>
</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

Is there a substitute for HtmlUnit on Android?

Is there a different solution available that can help me complete an HTML form containing checkboxes and radio buttons? I was in the process of developing an Android application that requires user input, sends the data to a website with an HTML form, fill ...

javaandroidhtmlseleniumhtmlunit

Shorten the text in a flex container using ellipsis and flex-grow

I have a "table" built using flex and I need to truncate the text in the first column if there isn't enough space, keeping it on a single line all the time. .parent { display: flex; border: 1px solid black; gap: 10px; } .first-column { bor ...

htmlcssflexboxellipsis

Tooltip not appearing when user hovers over it

I need help with displaying tooltips only when hovering over anchor tags. Initially, I have hidden the visibility and want to show it on hover. However, the tooltips are not appearing when I hover over them and there are no console errors displayed. Can so ...

htmlcsstooltip

What could be causing my widget to not function properly with Django and Bootstrap?

I am currently working with the following Boostrap code in my HTML: <div class="input-group date col-2" id="datetimepicker1" data-target-input="nearest"> {{form.data_contabile|as_crispy_field}} <div class="input-group-append" data-target="# ...

htmldjangobootstrap-4django-formsdjango-templates

Comparing User Inputs to Database Entries in PHP and MySQL: A Guide

I am currently working on an HTML form that includes a textbox for the user to enter their username and a login button. I want the database to be queried when the user clicks the login button and if there is a match, I would like to echo out a statement. T ...

phphtmlmysql

Tips for managing the dimensions of the <label> element within a React component

I'm facing an issue where the element size is not matching the box size as expected. Additionally, the width property doesn't seem to work in React. Does anyone know how to solve this problem? const DragDrop = () => { ... return ( &l ...

cssreactjstypescriptlabel

Creating multiple nested ng-repeats in an AngularJS table

Managing a large amount of data on users' availability by hour for multiple days can be challenging. The data is structured as follows: availData = { "date1":arrayOfUsers, "date2":arrayOfUsers, ... } arrayOfUsers= [ userArray, userArray, ... ] user ...

javascripthtmlangularjs

Should the username be specified but the password left blank, then an error message will be shown

<div class="form"> <h1>Sign In</h1> <form action="" method="post" name="login"> <input type="text" name="username" placeholder="Enter username" required /> <input type="password" name="password" placeholder="Enter password" ...

phphtml

Managing and Streaming Music in a Rails Application

Currently, I am storing mp3s using paperclip and they only play back if I utilize Amazon S3. However, I am hesitant to use Amazon S3 because I am unsure how to secure the files. Now, I am reconsidering my approach as I need to secure the mp3s and provide ...

javascriptruby-on-rails-3htmlmp3

Performing addition operations on numbers entered through an HTML input field using PHP

I am looking to create a feature where the numbers entered in an input form are added together. I need to store these numbers in an array and have them display in a new line when a button is clicked. Here is the HTML code for the input field and button: ...

javascriptphpjqueryhtml

Guide on setting an empty text box to be zero

Right below, you'll find a textbox that has been generated using this code snippet: $('#txtWeight').each( function() { var $this = $(this); var $weightText = $("<input type='text' class='txtWeightRow' maxle ...

jqueryhtml

Request a HTML variable and send it to JavaScript

My latest project involves a Binary to Decimal Calculator that is now fully functional, but I am looking to integrate an HTML input into it. <html> <input placeholder="00000000" name="htmlinput"></input> <input id="clickMe" type="butt ...

javascripthtmlvar

What is the best way to ensure my jQuery slides are responsive?

I have been developing a personal practice website and have successfully integrated a jQuery slide show for showcasing photographs. However, I am facing a challenge in making these slides responsive when the screen size changes. I have gone through numerou ...

jqueryhtmlcssresponsive-slides

Ensure that a DIV element stretches beyond the limits of its container

I am having an issue with a div that should overlap everything else as it functions as a menu. Despite trying various positioning tricks, the desired effect is not achieved. The div is only shown when hovering over a certain element. Here is the structure ...

css

Enhancing the mobile menu with a feature that allows users to easily close the

I am currently designing a mobile menu for a website that I created using Wordpress with the Divi Theme. When the user clicks on a "hamburger icon", it triggers a fullscreen menu to open: mobile menu If you tap on "Termine", it will reveal a submenu: mo ...

javascriptcsswordpressmobilemenu

Steps for updating images and text on a live webpage after launching the web application

I added an image to a jsp file. The image, named kid.jpg, is downloaded and stored in the /resources/images folder as shown in the code snippet below. <li style="background-image: url('resources/images/kid.jpg');"> Now that my web app is ...

javajqueryhtmlimagejsp

Steps for Deactivating Past Dates on JQuery Datepicker1. Open your

I've been working on a custom JQuery Calendar for selecting appointments, with the requirement to disable dates prior to the current date and highlight available dates in an orange color (#f48024). Unfortunately, my attempt using minDate hasn't b ...

javascripthtmljquerydatepickercalendar

Condense a lineup of names into only two rows

I have a challenge where I need to showcase a list of names separated by commas, pulled from an array in my React component. The HTML output should appear as follows: <div> <span>Liza</span>, <span>Eric</span>, <span>Mic ...

javascriptcssreactjs

What are the best methods for customizing the backgrounds of the form-floating input labels in the latest version of Bootstrap?

I'm currently using Bootstrap 5.3 and experimenting with the new "floating labels" feature. I want to add some extra styling to my input fields, like background colors. However, when I initially set a subtle green background color, it looks fine witho ...

csstwitter-bootstrapbootstrap-5

Issues with LESS rendering on the Django production server

After deploying my Django website to the production server, I noticed that the LESS file is being loaded but not rendered. Strangely, everything works perfectly on the local server. Any insights on why this might be happening? ...

cssdjangohtmlless