I am not able to create CSS Dropdown menu

0 votes

I was just trying to make a dropdown menu. But it is not working. What is 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 tried two things instead of opacity. (visibility:visible as well as visibility:hidden) (display: none and display: block). With these three trials, it is still not working.

Jun 21, 2022 in CSS by Edureka
• 12,890 points
158 views

1 answer to this question.

0 votes
Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.
answered Jun 28, 2022 by Edureka
• 11,450 points

Related Questions In CSS

0 votes
1 answer

asp.net master page css not applying to asp form pages

just try the following code: <head> ...READ MORE

answered Jun 13, 2022 in CSS by Edureka
• 11,450 points
521 views
0 votes
1 answer

How can I use CSS to style multiple images differently?

You can do that in HTML (delete ...READ MORE

answered Jun 21, 2022 in CSS by Edureka
• 11,450 points
534 views
0 votes
1 answer

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

A simple solution is to make the ...READ MORE

answered Jun 21, 2022 in CSS by Edureka
• 11,450 points
977 views
0 votes
1 answer

input[type='text'] CSS selector does not apply to default-type text inputs?

Because that is not what it is ...READ MORE

answered Jun 28, 2022 in CSS by Edureka
• 11,450 points
492 views
0 votes
1 answer

How do I give text or an image a transparent background using CSS?

Use either a semi-transparent PNG or SVG ...READ MORE

answered May 27, 2022 in CSS by Edureka
• 11,450 points
116 views
0 votes
1 answer

CSS Background Opacity

The CSS opacity property can be used ...READ MORE

answered Jun 17, 2022 in CSS by Edureka
• 11,450 points
229 views
0 votes
0 answers

How to make in CSS an overlay over an image?

I want to add this dark hue, ...READ MORE

Jul 22, 2022 in CSS by Edureka
• 12,890 points
112 views
0 votes
0 answers

How to style the option of an html "select" element?

Here's my HTML: <select id="ddlProducts" name="ddProducts"> ...READ MORE

Aug 17, 2022 in HTML by Deepak
• 940 points
101 views
0 votes
1 answer

I want to create a small square colour filled box in HTML & CSS. And most important - I want to write one line after the box

Try using the square html entity: <div style="color:blue">&a ...READ MORE

answered Jun 28, 2022 in CSS by Edureka
• 11,450 points
1,477 views
0 votes
1 answer

How to create material design input form using css and bootstrap?

Try with this code. HTML: <div class="main_div"> ...READ MORE

answered Jun 21, 2022 in CSS by Edureka
• 11,450 points
931 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP