How To Add Icons To Jumpdrive Images

How to Add together Image into Dropdown List for each items ?

Programmers can add together images into the dropdown list for each items by two methods which are mentioned beneath.

Method ane: Using CSS The .dropdown class uses position: relative; is used when the user needs the content to be set right under the dropdown button (Information technology is done using position: absolute).

The .dropdown-content class holds the bodily dropdown content. Note that the "min-width" is 160px. The programmer can prepare this according to the demand. Add <img> tag in dropdown content to insert image into dropdown list for each items.

Annotation: In instance the user needs the width of the content to be every bit wide equally the dropdown button, please gear up the width to 100% (Set overflow: auto to get whorl on small screens). Instead of using a border, we take used the CSS box-shadow holding to create the dropdown menu like a "card". The :hover selector is used to display the dropdown bill of fare when the user moves the mouse over the dropdown button.

Instance:

HTML

                <!DOCTYPE html>              
                <                html                >              
                <                caput                >              
                                <                championship                >Adding image to dropdown list</                championship                >              
                                <                style                >              
                                .dropbtn {              
                                groundwork-colour: #4CAF50;              
                                color: white;              
                                padding: 16px;              
                                font-size: 16px;              
                                edge: none;              
                                cursor: arrow;              
                                }              
                                .dropdown {              
                                position: relative;              
                                display: inline-block;              
                                }              
                                .dropdown-content {              
                                display: none;              
                                position: accented;              
                                background-color: #f9f9f9;              
                                min-width: 160px;              
                                box-shadow: 0px 8px 16px              
                                0px rgba(0, 0, 0, 0.2);              
                                z-index: 1;              
                                }              
                                .dropdown-content a {              
                                color: blackness;              
                                padding: 12px 16px;              
                                text-decoration: none;              
                                display: block;              
                                }              
                                .dropdown-content a:hover {              
                                background-color: #f1f1f1              
                                }              
                                .dropdown:hover .dropdown-content {              
                                display: block;              
                                }              
                                .dropdown:hover .dropbtn {              
                                background-colour: #3e8e41;              
                                }              
                                </                way                >              
                </                head                >              
                <                body                >              
                                <                center                >              
                                <                h1                mode                =                "color: green"                >              
                                GeeksforGeeks              
                                </                h1                >              
                                <                div                class                =                "dropdown"                >              
                                <                button                class                =                "dropbtn"                >              
                                Country Flags              
                                </                push button                >              
                                <                div                course                =                "dropdown-content"                >              
                                <                a                href                =                "#"                >              
                                <                img                src                =              
                                width                =                "twenty"                height                =                "fifteen"                > Republic of india</                a                >              
                                <                a                href                =                "#"                >              
                                <                img                src                =              
                                width                =                "20"                height                =                "15"                > USA</                a                >              
                                <                a                href                =                "#"                >              
                                <                img                src                =              
                                width                =                "20"                height                =                "15"                > England</                a                >              
                                <                a                href                =                "#"                >              
                                <                img                src                =              
                                width                =                "twenty"                summit                =                "15"                > Brazil</                a                >              
                                </                div                >              
                                </                div                >              
                                </                middle                >              
                </                body                >              
                </                html                >              

Output:

In in a higher place example, you lot need to "hover" your mouse pointer over button to see the dropdown list.

Method 2: Using Bootstrap: Dropdowns can be implemented from <a> or <button> components. For showing records or lists, toggle contextual overlays along with using the Bootstrap dropdown plugin.

Instance:

HTML

Output:

In in a higher place example, y'all can toggle (click on and off) button to encounter the dropdown list.

Note: You can apply <div> tag instead of <ul> tag and <a> tag instead of <li> tag in in a higher place example.

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can acquire HTML from the ground upwardly by following this HTML Tutorial and HTML Examples.

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You tin can learn CSS from the ground upward by following this CSS Tutorial and CSS Examples.