CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS

CSS Dropdowns

Dropdowns are one of the maximum crucial parts of an interactive internet site. CSS is a kind used to design the drop-down menus. A drop-down essentially is a group of lists below an unordered list. <ul> as it is popularly recognized in HTML international, sort of contrary to popular belief. Nested list (<li>) tags below the <ul> tag used to create drop-down shape.

To carry out the outcomes, we can use CSS for the additives particularly present inside the shape in a big way.

Example

Let’s consider a coding example.

Consider the below code:

<!DOCTYPE html>
<html>
    <head>
        <title>Dropdown property</title>
    </head>
    <body>
        <nav>
            <ul>
                <li class="Level-1">
                <a href="">Dropdown-list</a>
                <ul>
                    <li><a href="">Li 1</a></li>
                    <li><a href="">Li 2</a></li>
                    <li><a href="">Li 3</a></li>
                    <li><a href="">Li 4</a></li>
                </ul>
                </li>
            </ul>
        </nav>
    </body>
</html>

Output:

CSS Dropdowns

Types of CSS Dropdowns

The CSS Dropdowns are classified as:

  1. Basic Dropdown
  2. Dropdown-menu
  3. Right-aligned Dropdown
  4. Dropdown Navbar

Basic Dropdown

Example

Let’s consider a coding example.

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}


.dropdown-content {
display: none;
position: absolute;
background-color: white ;
min-width: 170px;
box-shadow: 0px 9px 16px 0px black;
padding: 13px 18px;
z-index: 1;
}


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


</style>
</head>
<body>
<h2>Hoverable Dropdown Here</h2>
<p>Circulate the mouse over the text below to open the dropdown content.</p>
<div class="dropdown">
<span>Hover Mouse Over Me</span>
<div class="dropdown-content">
<p>Hello All..!!</p>
</div>
</div>
</body>
</html>

Output:

CSS Dropdowns

If we hover the mouse (Hover Mouse Over Me) then the below output is shown:

CSS Dropdowns

Explanation:

HTML- Use any element to open the dropdown content material, e.g. A <span>, or a <button> element.

Use a container element (like <div>) to create the dropdown content material and upload something you want inner of it.

Wrap a <div> element across the elements to put the dropdown content efficaciously with CSS.

CSS- The .Dropdown class makes use of position: relative, which is wanted when we need the dropdown content material to be positioned right under the dropdown button (using position: absolute).

The .Dropdown-content material magnificence holds the real dropdown content. It's far hidden by default and might be displayed on hover (see underneath). Word the min-width is ready to 160px. Feel free to trade this.

Rather than using a border, we've got used the CSS field-shadow belongings to make the dropdown menu appear to be a "card".

The :hover selector is used to revealing the dropdown menu when the consumer moves the mouse over the dropdown button.

Dropdown-menu

Create a dropdown menu that allows the consumer to select an alternative from a listing. In this case, just like the preceding one, it depicts that we add links in the dropdown box and fashion them to in shape a styled dropdown button:

Example

Code:

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
  background-color: purple;
  color: white;
  padding: 15px;
  font-size: 15px;
  border: none;
  cursor: pointer;
}


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


.dropdown-content {
  display: none;
  position: absolute;
  background-color: seashell;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px black;
  z-index: 1;
}


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


.dropdown-content a:hover {background-color: white}


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


.dropdown:hover .dropbtn {
  background-color: purple;
}
</style>
</head>
<body>


<h2>Dropdown Menu</h2>
<p>Hover the mouse over the button to open that dropdown menu.</p>


<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
  <a href="**">Link-1</a>
  <a href="**">Link-2</a>
  <a href="**">Link-3</a>
  </div>
</div>


<p><strong>Remember:</strong> We use href="**" for test links. In a web site this would be URLs.</p>


</body>
</html>

Output:

CSS Dropdowns

If we hover the mouse(Dropdown) then below output is shown:

CSS Dropdowns

Right-aligned Dropdown

If you need the dropdown menu to move from right to left, instead of left to right, upload right: 0;

Example

Code:

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
  background-color: lightcoral;
  color: white;
  padding: 18px;
  font-size: 18px;
  border: none;
  cursor: pointer;
}


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


.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: white;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px black;
  z-index: 1;
}


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


.dropdown-content a:hover {background-color: white;}


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


.dropdown:hover .dropbtn {
  background-color: lightcoral;
}
</style>
</head>
<body>


<h2>Right Left Dropdown</h2>
<p>Determine whether the dropdown content material should go from left to right or right to left with the left and proper properties.</p>


<div class="dropdown" style="float:left;">
  <button class="dropbtn">Left</button>
  <div class="dropdown-content" style="left:0;">
  <a href="**">Product1</a>
  <a href="**">Product2</a>
  <a href="**">Product3</a>
  </div>
</div>


<div class="dropdown" style="float:right;">
  <button class="dropbtn">Right</button>
  <div class="dropdown-content">
  <a href="**">Product1</a>
  <a href="**">Product2</a>
  <a href="**">Product3</a>
  </div>
</div>


</body>
</html>

Output:

CSS Dropdowns CSS Dropdowns

Dropdown Navbar

Dropdown menu is added in Navbar.

Example

Code:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
}


li {
  float: left;
}


li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 15px 17px;
  text-decoration: none;
}


li a:hover, .dropdown:hover .dropbtn {
  background-color: purple;
}


li.dropdown {
  display: inline-block;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px black;
  z-index: 1;
}


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


.dropdown-content a:hover {background-color: white;}


.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>


<ul>
  <li><a href="#Home">Home</a></li>
  <li><a href="#Login">Login</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="**">Product 1</a>
      <a href="**">Product 2</a>
      <a href="**">Product 3</a>
    </div>
  </li>
</ul>


<h3>Dropdown Menu is in a NavBar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>

Output:

CSS Dropdowns CSS Dropdowns



ADVERTISEMENT
ADVERTISEMENT