Dropdown menu with float property example

Write code here

J | B | A

<!DOCTYPE html>
<html>
<head>
    <title>Dropdown menu with right and left</title>
    <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>
</html>

Note: We DO NOT save your trial code in our database.

Dropdown Menu With Float Property

Write code here

Output