Why doesn't CSS hover menu work on mobile?

Question

In my angular app, I have a profile button (its a users initial) in the nav bar. When a user hovers, a sub menu appears (using CSS :hover). On mobile, when a user taps the profile button, nothing happens.

I thought initially that it was an issue with the :hover CSS state (you can’t hover on mobile obviously), but my other dropdown work with the hover state perfectly fine on mobile. The second weird thing, is that in Chrome (Desktop) when I inspect and change the settings to mobile, it works, but on the live version on the actual phone, nothing happens. I'm quite confused as to why this is happening.I'm thinking it has something to do with it being in the nabber, because as I said, the :hover seems to work everywhere else.

.profileLeft {
  display: inline-block;
  margin-left: 10px;
  padding-top: 2px;
  float: right;
}

#navOne {
  padding-left: 0px;
}

.navbar-collapse.collapse {
  display: none !important;
}

.profileBubble {
  margin-top: 10px;
  width: 30px;
  height: 30px;
  background-color: rgb(0, 172, 168, 0.8);
  /* border: 2px solid #3e3f3a; */
  text-align: center;
  background-size: cover;
  display: inline-block;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
}

.dropup {
  width: 30px;
  height: 30px;
  display: inline-block;
}

.profileText {
  padding-top: 2px;
  font-size: 18px;
  color: white;
}

.dropup-content {
  display: none;
  position: absolute;
  top: 30px;
  right: 10px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  border-radius: 10px;
}

.dropup-content :hover {
  border-radius: 10px;
}


/* Links inside the dropup */

.dropup-content a {
  color: black;
  padding: 8px 16px;
  text-decoration: none;
  display: block;
}


/* Change color of dropup links on hover */

.dropup-content a:hover {
  background-color: #ddd;
  color: #00aca8 !important;
}


/* Show the dropup menu on hover */

.dropup:hover .dropup-content {
  display: block;
  border-radius: 10px;
}

<nav class="navbar navbar-default" *ngIf="nav.visible" id="navProperties">
  <div class="container" id="navOne">

    <a class="navbar-brand" [routerLink]="['/dashboard']" class="SClogo">
      <img src="assets/sc-logo-no-background.png" style="width: 60px; margin-top:5px; padding-bottom:10px">

    </a>

    <breadcrumb prefix="App Title"></breadcrumb>

    <!-- PROFILE FOR MOBILE -->
    <div class="profileLeft">
      <div class="dropup">
        <div class="profileBubble">
          <p class="profileText">{{userInitial}}</p>
        </div>
        <div class="dropup-content">
          <a *ngIf="!authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['/login']">Login</a>
          <a *ngIf="!authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['/register']">Register</a>
          <a *ngIf="authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['/profile']">Profile</a>
          <a *ngIf="authService.loggedIn()" (click)="onLogoutClick()" href="#">Logout</a>
        </div>
      </div>
    </div>
  </div>
</nav>