.meneSetting { margin-left: 14px; position: relative; } .meneSetting .menuIcon { cursor: pointer; display: block; font-size: 22px; line-height: 20px; padding: 5px 0; } .meneSetting .meneSettingList { background: #ffffff none repeat scroll 0 0; color: #222222; box-shadow: 0 1px 2px rgba(86, 86, 90, 0.5); opacity: 0; position: absolute; right: 0; text-align: left; top: 120%; transition: all 0.3s ease 0s; visibility: hidden; width: max-content; min-width: 100px; padding: 10px; z-index: 9999; } .meneSetting:hover .meneSettingList { opacity: 1; top: 100%; visibility: visible; } .meneSetting .meneSettingList .meneSettingItem:nth-child(2){ margin-top: 20px; } .meneSetting .meneSettingList .settingtitle{ font-size: 14px; margin-bottom: 8px; line-height: 21px; color: #777777; } .meneSetting .meneSettingList .dropdown{ width: 160px; } .meneSetting .meneSettingList .dropdown-toggle{ border: 1px solid #e8e8e8; padding: 5px 10px; display: flex; justify-content: space-between; cursor: pointer; } .meneSetting .meneSettingList .dropdown-menu{ width: 100%; box-shadow: none; border: 1px solid #e8e8e8; max-height: 400px; background-color: #fff; overflow: auto; } .meneSetting .meneSettingList .dropdown-menu>li>a{ padding: 3px 10px; } .meneSetting .userList { padding: 5px 0; /* opacity: 1; top: 100%; visibility: visible; */ } .meneSetting .userList .userItem { padding: 5px 10px; cursor: pointer; } .meneSetting .userList #userLogin { display: none; } .meneSetting .userList #signOut { margin-left: 10px; } .meneSetting .userList .userItem:hover { background-color: #e8e8e8; } .meneSettingList .xsMenuSettingItem { display: flex; line-height: 20px; margin-bottom: 10px; font-size: 14px; align-items: center; } .meneSettingList .xsMenuSettingItem:last-child { margin-bottom: 0; } .meneSettingList .xsMenuSettingItem i{ margin-right: 10px; font-size: 20px; line-height: 20px; }