diff --git a/100_projects/46-dropdown-menu-user-account/css/style.css b/100_projects/46-dropdown-menu-user-account/css/style.css
new file mode 100644
index 0000000..c61d79b
--- /dev/null
+++ b/100_projects/46-dropdown-menu-user-account/css/style.css
@@ -0,0 +1,130 @@
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+body{
+ min-height: 100vh;
+ background: linear-gradient(45deg, #4e65ff, #92effd);
+}
+.navigation{
+ position: fixed;
+ top:20px;
+ right: 20px;
+ width: 120px;
+ height: 60px;
+ background: #fff;
+ box-shadow: 0 25px 30px rgba(0, 0, 0, .1);
+ display: flex;
+ justify-content: space-between;
+ transition: height 0.5s, width 0.5s;
+ transition-delay: 0s, .5s;
+ overflow: hidden;
+}
+.navigation.active{
+ width: 300px;
+ height: 400px;
+ transition: width 0.5s, height 0.5s;
+ transition-delay: 0s, .5s;
+}
+.navigation .userBx{
+ display: flex;
+ align-items: center;
+ position: relative;
+ width:60px;
+ height:60px;
+ background: #fff;
+ overflow: hidden;
+ transition: .5s;
+ transition-delay: .5s;
+}
+.navigation.active .userBx {
+ width: calc(100% - 60px);
+ transition-delay: 0s
+}
+.navigation.userBx .username{
+ white-space: nowrap;
+ color: #555;
+ font-size: 1.1em;
+}
+.navigation .userBx .imgBx{
+ position: relative;
+ min-width:60px;
+ height: 60px;
+ background: #000;
+ border-radius: 50%;
+ border: 10px solid #fff;
+}
+.navigation .userBx .imgBx img{
+ position: absolute;
+ top:0;
+ left:0;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ object-fit: cover;
+}
+.navigation .menuToggle{
+ position: relative;
+ width: 60px;
+ height: 60px;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.navigation .menuToggle::before{
+ content:'';
+ position: absolute;
+ width: 30px;
+ height: 2px;
+ background: #555;
+ transform: translateY(-8px);
+ box-shadow: 0 8px #555;
+ transition: .5s;
+}
+.navigation .menuToggle::after{
+ content:'';
+ position: absolute;
+ width: 30px;
+ height: 2px;
+ background: #555;
+ transform: translateY(8px);
+ box-shadow: 0 -8px #555;
+ transition: .5s;
+}
+.navigation.active .menuToggle::before{
+ transform: translateY(0px) rotate(45deg);
+ box-shadow: 0 0 #555;
+}
+.navigation.active .menuToggle::after{
+ transform: translateY(0px) rotate(-45deg);
+ box-shadow: 0 0 #555;
+}
+.menu{
+ position: absolute;
+ width: 100%;
+ height: calc(100% - 60px);
+ margin-top: 60px;
+ padding: 20px;
+ border-top: 1px solid rgba(0,0,0, .1)
+}
+.menu li{
+ list-style: none;
+}
+.menu li a{
+ display: flex;
+ align-items: center;
+ gap:10px;
+ margin: 20px 0;
+ font-size: 18px;
+ text-decoration: none;
+ color: #555;
+}
+.menu LI A:hover{
+ color:#4e65ff;
+
+}
+.menu li a ion-icon{
+ font-size: 21px;
+}
\ No newline at end of file
diff --git a/100_projects/46-dropdown-menu-user-account/index.html b/100_projects/46-dropdown-menu-user-account/index.html
new file mode 100644
index 0000000..3a1aa40
--- /dev/null
+++ b/100_projects/46-dropdown-menu-user-account/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
Sam ....
+
+
+
+