[Помогите] Браузер автоматически выстанавливает инлайновый стиль display none, что делать?

пишу выпадающее меню на css и для подсписка браузер ставит автоматически инлайновый стиль display:none, подскажите в чем проблема?

HTML:

<ul class="nav-list">
        <li class="list-item"><a href="#" target="_blank" class="nav-item" >Home</a></li>
        <li class="list-item"><a href="#" target="_blank" class="nav-item" >Recipes</a>
          <ul class="sub-list">
            <li><a href="#">Recommended</a></li>
            <li><a href="#">Popular</a></li>
            <li><a href="#">quick&easy</a></li>
            <li><a href="#">Healthy</a></li>
            <li><a href="#">Newest</a></li>
          </ul>
        </li>
        <li class="list-item"><a href="#" target="_blank" class="nav-item" >Photo Gallery</a></li>
        <li class="list-item"><a href="#" target="_blank" class="nav-item" >Videos</a></li>
        <li class="list-item"><a href="#" target="_blank" class="nav-item" >All Categories</a></li>
      </ul>

css

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 130px;
  background-color: #fff;
  margin-bottom: 80px;
  box-shadow: 0px 2px 5px 3px rgba(0, 0, 0, 0.2);
}
.nav-list {
}
.list-item {
  display: inline-block;
  position: relative;
  list-style: none;
  margin: 0 10px;
}
.list-item a {
  padding: 10px;
  text-decoration: none;
  color: #000;
  font-weight: 300;
  font-size: 16px;
}
.sub-list {
  position: absolute;
  display: block;
  max-height: 0;
}

 

js файл даже не подключен к странице, поэтому и говорю что браузер сам выставляет, подскажите пожалуйста что следует чекнуть что бы понять в чем смысл

 

учусь верстать на гридах, из файлов только HTML и CSS, фреймворков нет никаких и js даже fonts awesome нет, поэтому js полностью отсутствует, а открывал через yandex, edge, chrome, одно и тоже везде