How to make a separate CSS rule for IE browser and others?

Question

JavaScript

How to write a cross-browser IE solution for a dropdown menu. For example, in all popular browsers we use a cool solution, but for IE we will write other rules, old school or the simplest appearance of a block.
I'm making a dropdown menu with a perspective effect .

transform: perspective(400px) rotate3d(1, 0, 0, -90deg);

This effect gives an interesting opening of the block.
So the HTML code is like this:

<div id="nav">
    <ul>
      <li><a href="#">Каталог 1</a>
        <ul>
          <li>Содержание каталога 1 - Это раскрывшийся сверху блок</li>
        </ul>
      </li>
      <li><a href="#">Каталог 2</a>
        <ul>
          <li>Содержание каталога 2 - Это раскрывшийся сверху блок</li>
        </ul>
      </li>
      <li><a href="#">Каталог 3</a></li>
      <li><a href="#">Каталог 4</a></li>
      <li><a href="#">Каталог 5я</a></li>
    </ul>
  </div>

And the CSS specifically for the effect is this:

@media  {  
        #nav ul li ul {
        max-height:0;
        overflow: hidden;
        transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
        transform-origin: 50% 0;
        -webkit-transition: 350ms;
        -moz-transition: 350ms;
        transition: 350ms;
        }
  #nav ul li:hover ul {
        max-height: 1000px;
        transform: perspective(400px) rotate3d(0, 0, 0, 0);
        padding:9px 0px;
        }
}

I have come across such interesting tricks, you can see one of them below:
In this code - classes and blocks do not apply to this task! I'm just showing an example of a working rule, the implementation path where other rules are specifically written specifically for IE.

@supports (-ms-ime-align: auto) {
  .sm_povorot .sm_face {transform-origin : 0 !important; } 
}

@media all and (-ms-high-contrast: none) {
  // .sm_povorot .sm_face:before,.sm_povorot .sm_face:after,.sm_povorot .sm_face {
    transform-origin : 0 !important; }     /* IE10 */
  ul#supermenu_stage_1 li:hover .sm_face,
  ul#supermenu_stage_2 li:focus .sm_face,
  ul#supermenu_stage_2 li:hover .sm_face,
  ul#supermenu_stage_1 li:focus .sm_face {
 		transform-origin: 50% 50% -9px;
 	}
  //  *::-ms-backdrop,  .sm_povorot .sm_face {transform-origin : 0 !important; }      /* IE11 */
} /* The end of: @media all and (-ms-high-contrast:none) */

Tell me how I can adapt this technique to my task, or maybe someone will offer other options / methods. Maybe someone has an interesting article on this method of implementation.
Thank you.

Answer 1

Hello.
A detailed article on styles for a specific version of IE (loading styles by conditions)
https://css-tricks.com/how-to-create-an-ie-only-st...

Answer 2

I share found and interesting solutions:
https://www.kobzarev.com/makeup/ie10-css-hacks/