CSS3 > Dropdown

Dropdown menu in CSS3

How to create dropdown menu using CSS


Dropdown 

The list of items that appear when clicking on a button or text selection. For example, many programs have a "File" drop down menu at the top left of their screen. Clicking on the "File" text generates a new menu with additional options.

Simple dropdown menu

To create dropdown menu we use position and display properties for creating dropdown menu

 <style>
        .dropdown {
            position:relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: relative; 
            padding: 10px 6px 2px 10px ;
           
        }
        .dropdown:hover .dropdown-content {
            display: block;
            color:white;
            background-color:green;  
        }
    </style>
</head>
<body>
    <p><i>Simple dropdown menu</i></p>
    <div class="dropdown">
        <span>Place mouse here</span>
        <div class="dropdown-content">
            <p>TechFunda</p>
        </div>
    </div>
</body>

In the above code snippet we have defined dropdown menu by using display property and position properties, we have dropdown, dropdown content and dropdown hover with different properties and in the main function we are div section which we have given the dropdown to the div tag by using class attribute, we are having another div in the div section which we have given dropdown content in the div section calls the properties in the dropdown content

output

Dropdownmenu

We can create dropdown menu by using different css properties

   <style>
        .dropbtn {
            background-color: green;
            color: white;
            padding: 20px;
            font-size: 20px;
            border: none;
        }
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: pink;
            min-width: 140px;
        }
            .dropdown-content a {
                color: orange;
                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:magenta;
        }
    </style>
</head>
<body>
    <h2>Dropdown Menu</h2>
    <p>Move the mouse over the button to open the dropdown menu.</p>
    <div class="dropdown">
        <button class="dropbtn">TechFunda</button>
        <div class="dropdown-content">
            <a href="#">AngularJS</a>
            <a href="#">JavaScript</a>
            <a href="#">CSS</a>
        </div>
    </div>
</body>

Dropdownmenu

In the above code snippet we have definded dropdown menu by using different css properties, we have defined dropdown menu by using content, hover, dropbutton and dropdown, we have given dropdown to the div section which specifies for the entire div section, in the nextline we are having button to create dropdown by giving dropbtn in the button and in the nextline we are having div section which we have given the dropdown content to the div section by giving different values in the <a> tag

output

Dropdown menu using float 

By using float property in the dropdown we can move the button of dropdown to left and right side 

<style>
        .dropbtn {
            background-color: green;
            color: black;
            padding: 16px;
            font-size: 16px;
            border: none;          
        }
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            right: 0;
            background-color: pink;
            min-width: 160px;
            
        }
            .dropdown-content a {
                color: black;
                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: orange;
        }
    </style>
</head>
<body>
    <p><i>Dropdown menu with right and left side</i></p>
    <div class="dropdown" style="float:left;">
        <button class="dropbtn">DotNetFunda</button>
        <div class="dropdown-content" style="left:0;">
            <a href="#">Articles</a>
            <a href="#">Forums</a>
            <a href="#">Codes</a>
        </div>
    </div>
    <div class="dropdown" style="float:right;">
        <button class="dropbtn">TechFunda</button>
        <div class="dropdown-content">
            <a href="#">AngularJs</a>
            <a href="#">JavaScript</a>
            <a href="#">HTML5</a>
        </div>
    </div>
</body>

Dropdown with float

In the above code snippet we have defined dropdown menu with float, we have created two dropdown buttons using css properties dropdown cointent, drpbtn, hover, a, we used float to move the dropdown button to the left and we have used float right to move the dropdown button to right 

output

Dropdown image

We can create images to drop down in the list '

<style>
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: white;
            min-width: 160px;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }       
    </style>
</head>
<body>
    <h2>Dropdown Image</h2>
    <div class="dropdown">
        <img src="download (1).png" />
        <div class="dropdown-content">
            <img src="download (2).png" />
        </div>
    </div>
</body>

Dropdown image

In the above code snippet we have created images in the dropdown menu, we used dropdown, dropdown content, hover, to create images in the dropdonw menu, in the first step we createda div section and we have given the dropdown to the div section, in that div section we have image  and  we created another div in that div section and we have given the dropdown content to the div section and we have given the image in the div section when the mouse is placed on the first image the second image which we have given displays in the dropdown menu

output

 

Dropdown navbar

We can create dropdown nav bar using css properties 

 <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: green;
        }

        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:pink;           
        }
            .dropdown-content a {
                color: black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
                text-align: left;
            }
                .dropdown-content a:hover {
                    background-color: limegreen;
                }
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>
<body>
    <p><i>Dropdown Navbar</i></p>
      <ul>
          <li class="dropdown">
              <a href="home" class="dropbtn">SNITFunda</a>
              <div class="dropdown-content">
                  <a>Techfunda</a>
                  <a>DotNetFunda</a>
                  <a>ITFunda</a>
              </div>
          </li>
        <li class="dropdown">
          <a href="#news">DotNetFunda</a>
        <div class="dropdown-content">
            <a>Articles</a>
            <a>Forums</a>
            <a>Codes</a>
        </div>
        </li>
        <li class="dropdown">
            <a href="#" class="dropbtn">ITFunda</a>
            <div class="dropdown-content">
                <a href="#">Sales</a>
                <a href="#">Offline</a>
                <a href="#">Online</a>
            </div>
        </li>
    </ul>
</body>

Dropdown Navbar

In the above code snippet we have created dropdown nav bar using css properties, we used ul, dropdown, dropdown content, dropbutton, dropdown content a, dropdown content hover, to create navbar, In the main function we are having the ul to define list items as SNitfunda, DotNetFunda and ITFunda, we have given the css  properties to the following lists

Output

  

 Views: 697 | Post Order: 141



Write for us