Как сделать margin-top только в браузере Firefox

Question

У меня есть строка меню, которая должна быть margin-top: 150px;

Но визуально Firefox выглядит иначе, чем Chrome.

Код заголовка: https://codepen.io/bugerman21/pen/rNxvyOv

Chrome:

Правильный дисплей

Firefox :

Неправильное отображение

HTML:

<nav>
<ul class="nav">
  <li class="category"><span>Category <i class="fas fa-sort-down"></i></span>
    <ul>
      <li><a href="#">Qwerty 1</a></li>
      <li><a href="#">Qwerty 2</a></li>
      <li><a href="#">Qwerty 3</a></li>
      <li><a href="#">Qwerty 4</a></li>
    </ul>
  </li>
  <li><a href="">Cuntact us</a></li>
  <li><a href="">FAQ</a></li>
</ul>

CSS:

* {
    margin: 0;
    pading: 0;
  }

.nav li ul {
    position: absolute;
    margin-top: 150px;
    min-width: 150px;
    list-style-type: none;
    display: none;
  }

Как сделать margin-top только для браузера Firefox?

Неудачная попытка:

@-moz-document url-prefix() {
  .nav li ul {
    margin-top: 150px;
  }
}

Answer 1

Вот да go приятель, извини, что вчера я уехал на день, но вижу внесенные изменения, и я оставил контуры элементов, чтобы лучше визуализировать. В настоящее время он будет отображаться должным образом во всех браузерах, даже в старом inte rnet explorer. Хотя вы могли бы sh сделать то же самое в целом, это, по крайней мере, вернет вас в нужное русло. Ура и добро пожаловать в StackOverflow! :)

PS: поскольку элементы меню навигации не имеют фиксированной высоты, вы можете подумать о том, чтобы сделать что-то stati c, чтобы вы могли изменить top: 56px на значение, которое помещает раскрывающийся список последовательно независимо от ширины экрана. Если вы сделаете пример в полноэкранном режиме, вы поймете, что я имею в виду.

header {
  display: flex;
  margin: 0;
  padding: 0 20px;
  justify-content: space-between;
  align-items: center;
  background-color: silver;
}
.header {
  grid-area: header;
  background-color: #1f1f1f;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
/*---------- Logo ----------*/
.logo {
  font-family: 'Gentium Book Basic', serif;
  font-size: 2.5em;
  color: #808080;
}

/*---------- Nav menu ----------*/
.nav {
  list-style-type: none;
  display: flex;
  justify-content: flex-start;
  margin: 0;
}
  .nav > li {
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
    transition: background-color .25s ease;
  }
  .nav a {
    display: block;
    padding: 20px;
    color: #ffffff;
    font-size: 1em;
  }
  .category {
    padding: 0 20px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: visible;
    border: red 1px solid;
  }


  /*---------- Sub menu ----------*/

  .nav li ul {
    position: absolute;
    top: 56px;
    left: 0;
    min-width: 150px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: none;
    border: green 1px solid;
  }
  .nav li > ul li {
    border-bottom: 1px solid #ffffff;
    background-color: #1f1f1f;
  }
  .nav li > ul li a {
    text-transform: none;
  }
  .nav li:hover > ul {
    display: block;
  }
  .nav > li:hover {
    background-color: #404040;
/*         box-shadow: -5px 5px #1f1f1f; */
  }
  .nav li ul > li:hover {
    background-color: #404040;
  }

/*---------- Search & Profile----------*/
.search_and_profile {
  display: flex;
  align-items: center;
}
.search_and_profile > p {
  margin: 0;
  color: #ffffff;
}
.search-container button {
  float: right;
  padding: 6px 10px;
  background: #e0e0e0;
  font-size: 17px;
  border: none;
  cursor: pointer;
}
.search-container input[type=text] {
  padding: 6px;
  font-size: 17px;
  border: none;
}

<header class="header">
      <a href="index.php"><span class="logo">Qwerty</span></a>
  <nav>
    <ul class="nav">
      <li class="category"><span>Category <i class="fas fa-sort-down"></i></span>
        <ul>
          <li><a href=#>Qwerty 1</a></li>
          <li><a href="#">Qwerty 2</a></li>
          <li><a href="#">Qwerty 3</a></li>
          <li><a href="#">Qwerty 4</a></li>
        </ul>
      </li>
      <li><a href="">Cuntact us</a></li>
      <li><a href="">FAQ</a></li>
    </ul>
  </nav><!-- .nav -->
  <div class="search_and_profile">
    <div class="search-container">
      <form action="#">
        <input type="text" placeholder="Search.." name="search">
        <button type="submit"><i class="fa fa-search"></i></button>
      </form>
    </div><!-- .search-container -->
  </div><!-- .search_and_profile -->
</header>

Answer 2

Это сработает для меня, дополнительно я добавил цвет, чтобы убедиться.

Вы тоже пробуете эту опцию

@media screen and (-moz-images-in-menus:0) {
 /* your style */
}

* {
    margin: 0;
    pading: 0;
  }

.nav li ul {
    position: absolute;
    margin-top: 150px;
    min-width: 150px;
    list-style-type: none;
    display: none;
  }
  
  
  
  
/* Added */
 @-moz-document url-prefix('') {
  .nav li ul {
    margin-top: 150px;
    color: orange;
  }
}

<div class="nav">
  <ul>
    <li>Home</li>
    <li>About
      <ul>
        <li>Some text</li>
        <li>Some more text</li>
      </ul>
    </li>
    <li>Contact</li>
  </ul>
</div>