I struggle to build a CSS dropdown menu from scratch

I attempted to create a dropdown menu, but it seems to be malfunctioning. Can anyone identify the error?

.dropdown1{
    width: 200px;
    height: 110px;
    background-color: white;
    border: 5px solid black;
    position:absolute;
    left: 400px;
    opacity: 0;
}

.about_us1:hover .dropdown1{
    opacity: 1;
}
    <div class="header">
       <strong> <h3 style="position: relative;top: 2px;left: 200px;font-weight: 1000;font-size: 30px;">HOME</h3></strong>
       <strong> <h3 class="about_us1" style="position: relative;top: -30px;left: 400px;font-weight: 1000;font-size: 30px;">ABOUT US</h3></strong>
<center>
       <div class="dropdown1">
           <h3>Our Motto</h3>
           <br>
           <h3>Admission</h3>
           <br>
           <h3>Principal's Desk</h3>
       </div>
</center>
       <strong> <h3 style="position: relative;top: -65px;left: 700px;font-weight: 1000;font-size: 30px;">ACADEMIC</h3></strong>
       <strong> <h3 style="position: relative;top: -100px;left: 1000px;font-weight: 1000;font-size: 30px;">INFRASTRUCTURE</h3></strong>
       <strong> <h3 style="position: relative;top: -135px;left: 1450px;font-weight: 1000;font-size: 30px;">ADMISSION</h3></strong>
    </div>

I've experimented with changing opacity to visibility:hidden/visible and display:none/block, but none of these solutions seem to work. Any help would be appreciated.

htmlcssdrop-down-menuopacity

Answer №1

Typically, it's best practice to keep your dropdown list nested within the button it corresponds to. For example, if you have a dropdown menu with items like Academic, Infrastructure, and Admission, all of these would ideally be contained within the About Us button. Below is an example code snippet from w3schools...

HTML

<div class="dropdown">
  <button class="dropbtn">Button1</button>
  <div class="dropdown-content">
    <a href="#">Link1</a>
    <a href="#">Link2</a>
    <a href="#">Link3</a>
  </div>
</div>
<div class="dropdown">
  <button class="dropbtn">Button2</button>
  <div class="dropdown-content">
    <a href="#">Link4</a>
    <a href="#">Link5</a>
    <a href="#">Link6</a>
  </div>
</div>

CSS

 /* Dropdown Button */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

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

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

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

Unusual occurrence involving label span and the use of italic font styling

Currently following a Xamarin tutorial on creating a label view. You can check out the tutorial here. Encountered an issue where applying an italic font attribute to text within a span tag does not retain the text size set in the label tag. <StackLayo ...

htmlxamarinlabelitalic

Automatically fill in checkboxes based on user input

Having a simple problem here, I am attempting to dynamically populate check-boxes in an HTML form. However, when I try using the checked property of the checkbox in HTML, it doesn't work correctly. The checkbox remains checked whether I use checked=&a ...

phpjavascripthtml

How can I modify the border color within a div element?

My journey into web development is just beginning, and I've grasped the basics of Java, JSP, HTML, JS, CSS, and JQ. However, I've hit a roadblock while attempting to change the border color of a div upon mouse hover. Despite my efforts, I haven&a ...

javascriptjqueryhtmlcss

Performing mathematical calculations using javascript

In my project, I'm utilizing HTML, CSS, and JavaScript to achieve the following: Dropdown menu for Category (Coffee Appliance) Dropdown menu for Product (Keurig Coffee Maker) Wattage: 1500kWh (auto-filled from Local Storage) Daily Energy Con ...

javascriptjqueryhtmlpseudocode

Conditional statements in jQuery for identifying a specific div based on its id

My current setup involves an HTML table that gets populated based on a mysql query. The table is enclosed within: <div id="punchclock" class="timecard"> I also have a jQuery script in place to calculate the totals of the times entered into this tab ...

javascriptjqueryhtmlmysql

Loading identical code in two different div elements

I am in the process of designing a comprehensive resource database featuring a side-scrolling container. Once a user clicks on a thumbnail within the container, the contents of a corresponding div will fade in and display specific category content. Each di ...

javascriptjqueryhtmlcss

Tips for customizing ngTable with expandable detail panels

I am currently working on styling a layout using ng-table, which includes a table within each row. The expanding functionality in Angular is implemented as follows: <tr ng-if="org.expanded" ng-repeat-end> <td></td> <td></td& ...

cssangularjsngtable

Switch up the Background using .css and jCarousel

I am attempting to create a dynamic gallery using jCarousel and Ajax. The thumbnails are being loaded from a '.txt' file. I am trying to achieve the following effect: When a thumbnail is clicked, the background of the body changes. This action sh ...

cssajaxdynamicbackgroundjcarousel

When writing CSS, ensure there is no space between selectors and classes of elements

Can you explain the distinction between using a css selector (like p) and assigning a class to an element (.cat)? p.cat{ } Vs. p .cat{ } Appreciate your help! ...

csscss-selectors

What is the best way to conceal a section of a div using CSS/React?

I am attempting to create a design where the entire content of a div is displayed initially, and then after clicking a button labeled "show less", only 300px of the content will be shown with the button changing to "show more". <div className="bod ...

javascripthtmlcssreactjs

Tips for achieving a seamless background texture alignment around a sphere with Three.js

https://i.sstatic.net/9SyRc.jpg I'm facing an issue with setting a texture on a large sphere in my code. Despite trying different wrapping options, the background still appears not to be smooth due to a visible seam where the two parts of the texture ...

htmlanimationthree.jstexturestexture-mapping

Strategies for Fixing TypeError: Object [object Object] does not possess the 'on' method

Upon adding a WYSIWYG editor to my HTML code, I encountered an error despite having included all the necessary JS files. xyz.html <html> <head> <script src="js/angular/angular.min.js"></script> <script src= ...

htmlangularjs

CSS :target activates on hover instead of click

I have a slider that is currently functioning well. However, I am facing a small issue. I would like to change the slider image when hovering over one of the <li> elements, instead of clicking on them. Is this achievable? I came across this referenc ...

htmlcsspure-css

Which client architecture is most suitable for an LCD wall application?

My task is to create a large LCD wall application similar to the one featured in this advertisement. The requirements include the ability for the wall to display full-screen videos or divide the screen into sections to show multiple videos or images. I a ...

flashhtmlvideo

Adding quotes is optional when using the append function

We are retrieving product options from the displayed html using variables PRODUCT_CUSTOM_1_ and PRODUCT_NAME_. Some products have quotations like " and '. However, when we post these strings elsewhere, they get cut off at the ". We need to either remo ...

javascriptjqueryhtmlquotations

When a table is required, .data() will provide a string

Within my HTML code, there is a table structure defined as follows: <table id="table" data-keys="{{keys}}"> Here, the keys variable represents an array (as I later iterate through it using {% for k in keys %}). However, when I t ...

javascripthtmljqueryjinja2

The issue with the display grid position being set to absolute is causing functionality

Struggling to create an image catalog with cards containing text while using position absolute on the text and position relative on the card. Unfortunately, it's not working as expected. /*catalog style*/ .grid-container{ padding: clamp(5px,10vw,2 ...

htmlcsscss-positioncss-grid

Link embedded in prism formatting, encased in code snippet

In the HTML template, I have the following code snippet: <pre> <code class="language-markup"> {% filter force_escape %} <Item> <MarkUp><a href="http://google.com">Google</a></MarkUp> <No ...

javascripthtmlprism.js

The functionality of Selenium's get(link) feature appears to be experiencing issues

Recently, I wrote a simple piece of code using selenium to open a webpage. from time import sleep from selenium import webdriver from selenium.webdriver.chrome.options import Options from selenium.webdriver.common.by import By import warnings warnings.simp ...

pythonhtmlselenium-webdriver

Can someone explain how to implement an onclick event for a div element inside an iframe using jquery or javascript?

Understanding the HTML Structure <iframe src="#" scrolling="no" id="gallery-frame"> <div class="gv_filmstrip"> <div class="gv_frame"> <div class="gv_thumbnail current"> <img src="images/grandstand-padang-right/1.jpg"> </d ...

javascriptjqueryhtmliframe