JSFiddle - React, Tailwind, and code Playground

by Bizon4ik

HTML

<div id="menu_top">
        
        <div id="user_name">
            Something
            <ul>
                <li><a href="#" id="a_user">Logout</a></li>
                <li><a href="#" id="a_user">Change password</a></li>
                 
                <li><a href="#" id="a_user">Adminka</a></li>
                
              
            </ul>
             
             
        </div>
     </div>

CSS

#menu_top {
    background-color: #5db22f;
    border-bottom: 1px solid black;
    height: 6.6%;
    min-height: 50px;
    }
#menu_top ul {
    max-width: 860px;
}

#menu_top ul li {
    float: left;
    list-style:none;
}

li a {
    display:block;
    font:18px Georgia, Arial, sans-serif;
    color:#fff;
    text-decoration:none;
    padding:15px 30px 15px 30px;  
    }
#menu_top ul li ul {
    width: 100px;
    } 

#menu_top ul li ul {
    display: none;
    position: absolute;
    top:50px;  
    left:160px;
    background-color: #5db22f;
    z-index: 999;    
    }
#menu_top ul li ul li a {
    padding:5px 20px 5px 20px;
    font:14px Georgia, Arial, sans-serif; 
    min-width: 60px;   
    }
#menu_top ul li a:hover {
    color: black;
    text-shadow:gray 1px 1px 1px ;
    }
#menu_top ul #branch:hover ul {
    display: block;
}
#user_name {
    float:right;    
    margin:15px 10px 0 0 ; 
    padding: 0 0 15px 20px;
    font:18px Georgia, Arial, sans-serif;
    color:#fff;
    
    background: url("../img/user.png") no-repeat;
    }
#user_name ul {
    width:120px;
    display:none;
    top:40px; 
    right:10px;
    position: absolute;
    float:right;
}
#user_name ul li {
    float: left;
    
    list-style:none;
    width:120px;
    
    background-color: #5db22f;
}    
#a_user {
   font:14px Georgia, Arial, sans-serif;
   color:#fff;
   text-decoration:none;
   padding:5px 20px 5px 20px;  
}
#user_name:hover ul {
    display: block;
}