Menu background colour not changing

ionic-v1
1

hi guys!

i’m trying to change the background of my menu’s list to a solid colour. I’ve looked for help on this topic but sadly nothing so far has worked.

My HTML:

  <ion-side-menu side="right">
<header nav-clear menu-close class="bar bar-header bar-dark">
  <h1 class="title">Menu</h1>
</header>
<ion-content class="has-header">
  <ion-list>
  <ion-item nav-clear menu-close href="#/app/index">
      <i class="icon ion-home"></i>
      1
    </ion-item>
    <ion-item nav-clear menu-close href="#/app/favourites">
    <i class="icon ion-star"></i>
      2
    </ion-item>
    <ion-item nav-clear menu-close href="#/app/shoppinglist">
    <i class="icon ion-clipboard"></i>
      3
    </ion-item>
     <ion-item nav-clear menu-close href="#/app/search">
    <i class="icon ion-search"></i>
      4
    </ion-item>
    <ion-item nav-clear menu-close href="#/app/morebooks">
    <i class="icon ion-plus"></i>
      5
    </ion-item>
    <ion-item nav-clear menu-close href="#/app/aboutus">
    <i class="icon ion-help"></i>
      6
    </ion-item>
  </ion-list>
</ion-content>

My CSS:

.menu.menu-right{
  width:100%;
  background-color:red;
}

.menu-right .item{
  border: none !important;
  background-color: red;
  color: red;
  margin-bottom:10px;
}

Here’s a screenshot of what it looks like:

image
image.png275×662 4.13 KB

Any help of suggestions would be much appreciated!

Thanks guys!

Steve