Dropdown Menu in CSS.

Basic Dropdown [HTML – CSS]

<html>
<head>
<style>

.dropbtn {
    background-color: red;
    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: lightgrey;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

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

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

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

.dropdown:hover .dropbtn {
    background-color: brown;
}

</style>
</head>
<body>


<img src="logo.jpg"/>

<h2>Dropdown Menu:</h2>

<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">

  <button class="dropbtn">Dropdown</button>

  <div class="dropdown-content">

    <a href="https://t4tutorials.com/html"/>HTML</a>

    <a href="https://t4tutorials.com/css-tutorials/">CSS</a>

    <a href="https://t4tutorials.com/keyword-worth-check-in-seo-search-engine-optimization"/>SEO</a>
  </div>
</div>

</body>
</html>

<html>

<head>

<style>

.dropbtn {

background-color: red;

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: lightgrey;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

}

.dropdown-content a {

color: purple;

padding: 12px 16px;

text-decoration: none;

display: block;

}

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

.dropdown:hover .dropdown-content {

display: block;

}

.dropdown:hover .dropbtn {

background-color: brown;

}

</style>

</head>

<body>

<h2>Dropdown Menu:</h2>

<p>Move the mouse over the button to open the dropdown menu.</p>

<button class="dropbtn">Dropdown</button>

</div>

</body>

</html>

Try it

Dropdown Navbar CSS [HTML – CSS]

<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
li {
    float: left;
}
li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}
li.dropdown {
    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);
    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: #f1f1f1}

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

</style>
</head>
<body>


<img src="logo.jpg"/>

<h2>Dropdown Menu:</h2>

<ul>
  <li><a href="#home">Welcome</a></li>
  <li><a href="#news">About us</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Languages</a>
    <div class="dropdown-content">

     <a href="https://t4tutorials.com/html"/>HTML</a>

  <a href="https://t4tutorials.com/css-tutorials/">CSS</a>

  <a href="https://t4tutorials.com/php-server-side-scripting-language-for-website-development"/>PHP</a>

  <a href="https://t4tutorials.com/keyword-worth-check-in-seo-search-engine-optimization"/>SEO</a>
  </li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar:</h3>
<p>Hover over the<b>"Dropdown"</b> link to see the dropdown menu...</p>
</body>
</html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin:

padding: 0;

overflow: hidden;

background-color: #333;

}

li {

float: left;

}

li a, .dropbtn {

display: inline-block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover, .dropdown:hover .dropbtn {

background-color: red;

}

li.dropdown {

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);

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: #f1f1f1}

.dropdown:hover .dropdown-content {

display: block;

}

</style>

</head>

<body>

<h2>Dropdown Menu:</h2>

<ul>

<li><a href="#home">Welcome</a></li>

<li><a href="#news">About us</a></li>

<a href="javascript:void(0)" class="dropbtn">Languages</a>

</li>

</ul>

<h3>Dropdown Menu inside a Navigation Bar:</h3>

<p>Hover over the<b>"Dropdown"</b> link to see the dropdown menu...</p>

</body>

</html>

Try it

Right-aligned Dropdown Content [HTML – CSS]

<html>
<head>
<style>
.dropbtn {
    background-color: red;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

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

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

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

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

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

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

<h2>Aligned Dropdown Content:</h2>

<p>Determine whether the dropdown content should go from left to right or right to left with the left and right properties....</p>

<div class="dropdown" style="float:left;">
  <button class="dropbtn">Left</button>
  <div class="dropdown-content" style="left:0;">
      <a href=<"https://t4tutorials.com/html"/>HTML</a>
    <a href=<""https://t4tutorials.com/php-server-side-scripting-language-for-website-development"/>PHP</a>
  </div>
</div>

<div class="dropdown" style="float:right;">
  <button class="dropbtn">Right</button>
  <div class="dropdown-content">
    <a href=<"https://t4tutorials.com/html"/>HTML</a>
    <a href=<""https://t4tutorials.com/php-server-side-scripting-language-for-website-development"/>PHP</a>
  </div>
</div>

</body>
</html>

<html>

<head>

<style>

.dropbtn {

background-color: red;

color: white;

padding: 16px;

font-size: 16px;

border: none;

cursor: pointer;

}

.dropdown {

position: relative;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

right: 0;

background-color: lightblue;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

}

.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

}

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

.dropdown:hover .dropdown-content {

display: block;

}

.dropdown:hover .dropbtn {

background-color: red;

}

</style>

</head>

<body>

<h2>Aligned Dropdown Content:</h2>

<p>Determine whether the dropdown content should go from left to right or right to left with the left and right properties....</p>

</div>

<button class="dropbtn">Right</button>

</div>

</body>

</html>

Try it

Dropdown Menu in CSS
By: Prof. Dr. Fazal Rehman | Last updated: March 3, 2022

Basic Dropdown [HTML – CSS]

Dropdown Navbar CSS [HTML – CSS]

Right-aligned Dropdown Content [HTML – CSS]

Video Lecture

Related Posts:

Leave a Comment