Question

I am using the Bootstrap CSS framework that has this:

.dropdown-menu {
  left: 0;
}

but I want this:

.dropdown-menu {
  right: 0;
}

i.e. I want to remove an attribute and replace it with another – I can’t get it to work using cascading. I.e. this does not work:

.dropdown-menu {
    left: 0;
    left: none;
    right: 0;
}

Is this possible?

Answer 1

To get rid of the previous left value set it to auto. To ensure it really overrides the old one you might also need !important (depends on the specificity of the selectors used, and the order of the definitions – but adding it won’t hurt)

.dropdown-menu {
    left: auto !important;
    right: 0;
}