CSS | DropDowns - GeeksforGeeks

03 Dec, 2018
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:
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:
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:
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://media.geeksforgeeks.org/wp-content/uploads/temp1.png"            width="150" height="50" align="middle">                 <div class="sub-dropmenu">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/temp1.png"                 width="600" height="200">             </div>        </div>    </body></html>                    
Output:
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:
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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Basics
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property