How to make dropdown, image and it's content in right side-CodePudding

<!DOCTYPE html>
    <html lang="en">
        <head>
            <title>DD
            </title>
            <style>
            
                .dropdown
                {
                    
                    position : relative;
                    
                }
                
                .dropdown-content
                {
                     
                    display : none;
                    position : absolute;
                    width : auto;
                    overflow : auto;
                    box-shadow : 0px 10px 10px 0px rgba(0,0,0,0.4);
                }
                
                .dropdown:hover .dropdown-content
                {
                    display : block;
                }
                
                .dropdown-content a
                {
                    
                    width:auto;
                    display : block;
                    color : #000000;
                    padding : 5px;
                    text-decoration : none;
                }
                
                .dropdown-content a:hover
                {
                    color : #FFFFFF;
                    background-color : #00A4BD;
                }
                
                .round-button
                {
                    background-image: url(https://i.ibb.co/6wf8b4D/1144709.png);    
                     background-repeat: no-repeat;
    background-position: center; 
                    background-size: 105px;
                    display : block;
                    width : 80px;
                    height : 80px;
                    line-height : 80px;
                    border : 2px solid #f5f5f5;
                    border-radius : 50%;
                    color : #f5f5f5;
                    text-align : center;
                    text-decoration : none;
                    
                    box-shadow : 0 0 3px gray;
                    font-size : 20px;
                    font-weight : bold;
                }
                
            
            </style>
        </head>
        <body>
            <div >
                <button >
                </button>
                <div >
            
                    <a href="#">Blog
                    </a>
                    <a href="#">Academy
                    </a>
                    <a href="#">YouTube
                    </a>
                </div>
            </div>
        </body>
    </html>

I am trying to create a dropdown menu, and I was successful but I can't take the drop down menu to right side i am able to take in right side but it's content is still staying at left side any suggestions? And would like it if you would teach me how to make a line to separate the contents.

CodePudding user response：

in the .dropdown class, add float: right

     .dropdown
                {
                    position : relative;
                    float: right;           
                }

CodePudding user response：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <title>DD
            </title>
            <style>
            
                .dropdown
                {
                    
                    position : relative;
                    
                }
                
                .dropdown-content
                {
                    margin-left: 100px;
                    display : none;
                    position : absolute;
                    width : auto;
                    overflow : auto;
                    box-shadow : 0px 10px 10px 0px rgba(0,0,0,0.4);
                }
                
                .dropdown:hover .dropdown-content
                {
                    display : block;
                }
                
                .dropdown-content a
                {
                    
                    width:auto;
                    display : block;
                    color : #000000;
                    padding : 5px;
                    text-decoration : none;
                }
                
                .dropdown-content a:hover
                {
                    color : #FFFFFF;
                    background-color : #00A4BD;
                }
                
                .round-button
                {
                    background-image: url(https://i.ibb.co/6wf8b4D/1144709.png);    
                     background-repeat: no-repeat;
    background-position: center; 
                    background-size: 105px;
                    display : block;
                    width : 80px;
                    height : 80px;
                    line-height : 80px;
                    border : 2px solid #f5f5f5;
                    border-radius : 50%;
                    color : #f5f5f5;
                    text-align : center;
                    text-decoration : none;
                    
                    box-shadow : 0 0 3px gray;
                    font-size : 20px;
                    font-weight : bold;
                }
                
            
            </style>
        </head>
        <body>
            <div >
                <div >
            
                    <a href="#">Blog
                    </a>
                    <a href="#">Academy
                    </a>
                    <a href="#">YouTube
                    </a>
                </div>
                <button >

                </button>

            </div>
        </body>
    </html>

What I changed is I moved:

                <a href="#">Blog
                </a>
                <a href="#">Academy
                </a>
                <a href="#">YouTube
                </a>
            </div>`

before

<button >

</button>

Which resulted in the dropdown appearing "in-front" of the button. Then, in the css at .dropdown-content, I added margin-left: 100px;.