WHAT'S NEW?
Loading...

How to make Dropdown menu button in HTML and CSS?

October 20, 2019 , , , , , ,
There are many ways to create a drop down menu using HTM and CSS. We can use <div>, <span> or <button> element to create drop down navigation menu. In this pose i have shared a code to create simple drop down menu button.

Move your mouse cursor over the following buttons.

Sub Link 1 Sub Link 2 Sub Link 3
Sub Link 1 Sub Link 2 Sub Link 3 Sub Link 4
Sub Link 1 Sub Link 2 Sub Link 3 Sub Link 4

CSS Code 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
.menu a {
  float: left;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  overflow: hidden;
  display: inline;
}

.dropdown .dropbtn {
  border: none;
  outline: none;
  color: white;
  padding: 7px 7px;
  background-color: black;
  
}

.menu a:hover, .dropdown:hover .dropbtn {
  background-color: #aabbcc;
  color: black;
}

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

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

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

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

HTML Code 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html> 
<html> 
<head> 
     <title> </title> 

</head> 
<body> 
<div class="menu">
     <div class="dropdown">
 <button class="dropbtn">Link 1 &#9755;</button>
 <div class="dropdown-content">
           <a href="#"> Sub Link 1 </a>
      <a href="#"> Sub Link 2 </a>
      <a href="#"> Sub Link 3 </a>
 </div>
     </div> 
 
     <div class="dropdown">
 <button class="dropbtn">Link 2 &#9755;</button>
 <div class="dropdown-content">
      <a href="#"> Sub Link 1 </a>
      <a href="#"> Sub Link 2 </a>
      <a href="#"> Sub Link 3 </a>
      <a href="#"> Sub Link 4  </a>
        </div>
     </div> 
 
     <div class="dropdown">
 <button class="dropbtn">Link 3 &#9755;</button>
 <div class="dropdown-content">
      <a href="#"> Sub Link 1 </a>
      <a href="#"> Sub Link 2 </a>
      <a href="#"> Sub Link 3 </a>
      <a href="#"> Sub Link 4  </a>
 </div>
     </div> 
</div>
</body> 
</html>

You may also Like 



0 comments:

Post a Comment

Follow:

Shared by Way Templates