a要素のサイズ変更とレスポンシブ

前提・実現したいこと

a要素のサイズ変更とヘッダーの範囲が変わった時に同じようにレスポンシブさせる方法がわかりません。初心者であり、初めて作るwebなので簡単な言葉で教えて頂けると助かります。
リンク内容　このサイトのヘッダーのようにメニューボタンからさらに詳しいメニューボタンが表示されるのがゴールです。>

重ねてお聞きしたいのですがが、jQueryでa要素の下にa要素を出すにはcssでa要素を作り　display: none;にしてからfadeInメソッドを用いて表示するのでしょうか？
a要素の下にa要素を作る方法もわかりません。

該当のソースコード

html
1コード
2<!DOCTYPE html>
3<html>
4  <head>
5    <meta charset="utf-8">
6    <title>（株）〇〇</title>
7    <link rel="stylesheet" href="stylesheet.css">
8    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
9    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
10    <script type="text/javascript"></script>
11    <script src="sample.js" type="text/jscript"></script>
12  </head>
13  <body>
14    <header>
15      <div class="header-container">
16        <div class="heder-logo">
17        </div>
18        <div class="header-popup">
19          <ul>
20            <li><a href="#" class="company-botton">（株）〇〇</a></li>
21            <li><a href="#" class="botton">〇〇の強み</a></li>
22            <li><a href="#" class="bototn">サービス内容</a></li>
23            <li><a href="#" class="botton">会社概要</a></li>
24            <li><a href="#" class="botton">採用情報</a></li>
25            <li><a href="#" class="botton">お問い合わせ</a></li>
26          </ul>
27        </div>
28      </div>
29    </header>
30

css
1コード
2.title{
3  color: #02ccab;
4}
5
6body{
7  margin: 0;
8  font-family: "monospace";
9}
10
11header{
12  background-color: #228b22;
13  display: 0.7;
14  width: 100%;
15  height: 100px;
16  position:fixed;
17  top: 0;
18  z-index: 10;
19}
20header a{
21  width: auto;
22}
23
24.header-container ul li{
25  display: inline;
26  width: 100%;
27}
28
29.header-container a{
30  height: 100px;
31  font-size: 20px;
32  padding: 20px 30px;
33  text-decoration: none;
34  color: white;
35  border-left: solid 1.5px white;
36  transition: .4s;
37}
38
39.header-container a:hover {
40  background: #006400;
41  color: white;
42}