Tutorialspoint.dev

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.

<!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>

Output:
dropdown menu

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

<!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>                    

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.

<!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>                    

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:

<!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">
            <img src="https://tutorialspoint.dev/image/temp1.png"
            width="150" height="50" align="middle">     
            <div class="sub-dropmenu">
                <img src="https://tutorialspoint.dev/image/temp1.png" 
                width="600" height="200"
            </div>
        </div>
    </body>
</html>                    

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:

<!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>                    

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.


This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter