CSS | DropDowns

Dropdowns are one of the most important parts of an interactive website. CSS is used to design the drop-down menus. A drop-down is a bunch of lists under an unordered list i.e. <ul> as it is popularly known in HTML world. Nested list (<li>) tags under the <ul> tag used to create drop-down structure. To bring out the effects use CSS for the components present in the structure. The CSS is very straightforward property used to create the drop-down menu.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
dropdown menu

Example: Adding CSS property in HTML structure to create interactive drop-down structure.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Navigation property</title>
        <style>
            a {
                color: white;
                background-color:#990;
                text-decoration: none;
            }
            nav{
                background: #333;
            }
            nav >ul{ margin: 0 auto; width: 80px; }
            nav ul li{
                display: block;
                float: left;
                margin-left:-40px;
                position: relative;
            }
            nav ul a{
                display: block;
                float: left;
                width: 150px;
                padding: 10px 20px;
            }
            nav ul a:hover{
                background: #090;
            }
            nav ul li ul li{
                float: none;
            }
            nav ul li ul{
                display: none;
                position: absolute;
                background: #333;
                top: 42px;
            }
            nav ul li:hover>ul{
                display: block;
            }
            nav ul li a{
                display: block;
            }
            .gfg {
                font-size:40px;
                font-weight:bold;
                color:#009900;
                Text-align:center;
            }
            p {
                font-size:20px;
                font-weight:bold;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div class="gfg">GeeksforGeeks</div>
        <p>Dropdown Navigation property</p>
        <nav>
            <ul>
                <li class="Lev-1">
                <a href="">Level-1</a>
                <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
                </li>
            </ul>
        </nav>
    </body>
</html>                    

chevron_right


Output:
navigation

The above-written code producing a proper output on the basis of a drop-down structure. Important parts of HTML code are discussed below:



  • nav is the outermost container
  • nav ul li ul li – float is set to none so that it remains intact when we hover over it.
  • Use relative position so that li moves or changes its position relative to its component.
  • Use ‘>’ after hover to see the effect of hover on the immediate next ul of the li.

Right-aligned Dropdown: Right aligned dropdown is a dropdown that float value is right to display drop-down content on the right screen. Add float right to the div which holds the content.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>right-aligned dropdown content property</title>
        <style>
            #drop {
                background-color: teal;
                color: white;
                padding: 10px;
                font-size: 16px;
                width: : 200px;
                height: : 60px;
                border-radius: 5px;
                font-size: 20px;
            }
            #drop-down {
                position: relative;
                display: inline-block;
            }
            #dropdown-menu {
                display: none;
                position: absolute;
                background-color: #666;
                width: 160px;
                margin-left:-45px;
                border-radius: 5px;
                z-index: 1;
            }
            #dropdown-menu a {
                color: black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
            }
            .gfg {
                font-size:40px;
                font-weight:bold;
                color:#009900;
                Text-align:center;
            }
            p {
                font-size:20px;
                font-weight:bold;
                text-align:center;
            }
            #dropdown-menu a:hover {background-color: #ddd;}
            #drop-down:hover #dropdown-menu {display: block;}
        </style>
    </head>
    <body>
        <div class="gfg">GeeksforGeeks</div>
        <p>Right-aligned Dropdown content property</p>
        <div id="drop-down" style=" float: right; margin-right: 70px;">
            <button id="drop">DropDown</button>
            <div id="dropdown-menu">
                <a href="">Item 1</a>
                <a href="">Item 2</a>
                <a href="">Item 3</a>
                <a href="">Item 4</a>
            </div>
        </div>
    </body>
</html>                    

chevron_right


Output:
right aligned dropdown

Image Dropdown: It is not a dropdown but enlarges the image on which you hover. Needs basic CSS and an image to make it work.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Image Dropdown</title>
        <style>
            .dropmenu {
                position: relative;
                display: inline-block;
                margin-left:150px;
            }
            .sub-dropmenu {
                display: none;
                position: absolute;
            }
            .dropmenu:hover .sub-dropmenu {
                display: block;
            }
            .enlarge {
                padding: 15px;
                text-align: center;
            }
            .gfg {
                margin-left:40px;
                font-size:30px;
                font-weight:bold;
            }
        </style>
    </head>
    <body>
        <div class = "gfg">Image Dropdown property</div>
        <div class="dropmenu">
            width="150" height="50" align="middle">     
            <div class="sub-dropmenu">
                width="600" height="200"
            </div>
        </div>
    </body>
</html>                    

chevron_right


Output:
image dropdown

Clicked Drop-downs: This requires basic understanding of JavaScript as it is used to run some functions to make the clicked drop-down work.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>clicked dropdown</title>
        <style type="text/css">
            button {
                background: #009900;
                width: 200px;
                height: 60px;
                color: white;
                border: 1px solid #fff;
                font-size: 20px;
                border-radius: 5px;
              
            }
            ul li {
                list-style: none;
            }
            ul li a {
                display: block;
                background: #c99;
                width: 200px;
                height: 50px;
                text-decoration: none;
                text-align: center;
                padding: 10px;
                border-radius: 5px;
                text-align: center;
                color: white; 
                font-size: 25px;
            }
            ul li a {
                text-decoration: none;
            }
            ul li a:hover {
                background: #009900; 
            }
            .open {display: none;}
            .gfg {
                font-size:40px;
                font-weight:bold;
                color:#009900;
                Text-align:center;
            }
            p {
                font-size:20px;
                font-weight:bold;
                text-align:center;
            }
        </style>
        <script type="text/javascript">
            function open_menu(){
                var clicked= document.getElementById('drop-menu');
                if(clicked.style.display=='block')
                {
                    clicked.style.display='none';
                }
                else{
                    clicked.style.display='block';
                }
            }
        </script>
    </head>
    <body>
        <div class="gfg">GeeksforGeeks</div>
        <p>Clicked Dropdown content property</p>
        <div id="dropdown">
            <button onclick="open_menu()">Click Me!</button>
            <div class="open" id="drop-menu">
            <ul>
                <li><a href="">Item-1</a></li>
                <li><a href="">Item-2</a></li>
                <li><a href="">Item-3</a></li>
                <li><a href="">Item-4</a></li>
            </ul>
            </div>
        </div
    </body
</html>                    

chevron_right


Output:
clicked dropdown

Note: Some important highlights of the code:

  • The javascript function will expand and collapse the menu when the button “Click Me” is clicked.
  • We use onclick to call the javascript function in the button tag.


My Personal Notes arrow_drop_up

A tech fanatic who can code stuff

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.