My dropdown menu does not appear html css vanilla js

There's a single problem that you did in the function declaration of your js. You just need to change the capital 'F' to 'f' of the line of function in order to make the code work. Javascript is case sensitive language, so your code didn't worked as you used Function for declaring a function.

To make the dropdown list horizontal, you need to remove the position relative property from .nav-links ul li selector in the css and then to get those vertical lines you need to create .nav-links ul li ul li selector that will select the dropdown list and add border-left property to get those vertical lines. Also, in order to make those icons of social media visible, you need to add the fontawesome link in the head section of the html code. I am adding the whole code in the next answer. Please find it below.

   <html>
   <head>
   <!--<meta name="viewport" content="with=device-width, initial-scale=1.0">-->
      <title>Header</title>
<link rel="stylesheet" href="style.css">

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2? family=Montserrat:wght@300;500;700&display=swap rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>*{
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  }
  .header{
  min-height: 20em;
  width: 100%;
  background: #00afef;
  color: #000;
  position: relative;
  }
  nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  }
  .nav-links{
  text-align: center;
  align-items: center;
  width: 100%;
   height: 100%;
  background:#fff;
   display: block;
   margin: 0;
  }
  .nav-links ul li{

  list-style: none;
  display:inline-block;
  padding:10px 25px;
  cursor: pointer;
  }
  .nav-links ul li {

  color: #000;
  text-decoration: none;
  font-size: 18px;
  cursor: pointer;
  text-align: right;
  line-height: 1.2rem;

  /* position: relative; */
  }
  #dropdown {

  display: none;
  position: absolute;
 width: 100%;
 background-color: #fff;
 z-index: 999;
 left: 0;

  }
 .nav-links ul li ul li{
    border-left: 3px solid #000;

      }
      #dropdown.active{

      display:block;
  }</style>
</head>
<body>

<div class="header">

<nav>
      <div class="nav-links">
        <ul>
            <ul>
            <li><a href"" style="color:#00afef;"><i class="fa fa-youtube-play"> 
 </i></a></li>
            <li><a href"" style="color:#00afef;"><i class="fa fa-twitter"></i> 
 </a></li>
            <li><a href"" style="color:#00afef;"><i class="fa fa-linkedin"></i> 
     </li>
            <li><a href"" style="color:#00afef;">Log Out</a></li>
            <li><a href"" style="color:#00afef;">My Dashboard</a> 
       </li>
            </ul>
        </ul>
        <ul>
            <li><img src="https://i.imgur.com/9fx89Br.png" 
   style="width:250px;height:100px;"></li>
            <li>Product</li>
            <li>Safety Tools</li>
            <li>Training</li>
            <li>Engagement</li>
            <li id="menu">Membership
                <ul id="dropdown">
                        <li>Latest News</li>
                        <li>Subscribe to Newsletter</li>
                        <li>Videos</li>
                        <li>Publications</li>
                </ul>
            </li>
        
            <li>News</li>
            <li>About</li>
        </ul>
        

</div>
</nav>
<script>console.log("hellokkk");

  document.getElementById("menu").addEventListener("click",openMenu);

      function openMenu() {

  document.getElementById("dropdown").classList.toggle("active");
  }</script>
<script src="header.js"></script>
</body>
</html>