整理导航栏到手机

Question

我有一个设计问题，有人可以告诉我如何使nabvar移动，因为当我在手机上看到设计时就会丢失设计

示例设计

Image Desing css  -

代码样式

<style>

* {
    box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  font-size: 14px;
  color: white;
  text-align: center;
  padding: 14px 14px;
  text-decoration: none;
  position: relative;
}

.topnav a:hover {
    background-color:#22B573;
}
</style>
<style>
/* ---------------menu dropdown------------- */
.dropdownn {
    float: left;
    overflow: hidden;
}
.navbarmega a:hover, .dropdownn:hover{
    /*background-color: red;*/
    background-color:#22B573;
}
.dropdownn-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 155px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdownn-content a {
    float: none;
    color: black;
    padding: 12px 77px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdownn-content a:hover {
    background-color: #ddd;
}

.dropdownn:hover .dropdownn-content {
    display: block;
}
</style>

<style>
/* ---------------menu dropdown------------- */
.dropdownnn {
    float: left;
    overflow: hidden;
}
.navbarmega a:hover, .dropdownnn:hover{
    /*background-color: red;*/
    background-color:#22B573;
}
.dropdownnn-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 30px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdownnn-content a {
    float: none;
    color: black;
    padding: 12px 25px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdownnn-content a:hover {
    background-color: #ddd;
}

.dropdownnn:hover .dropdownnn-content {
    display: block;
}
</style>
<style>
/* ---------------menu dropdown------------- */
.dropdownnnt {
    float: left;
    overflow: hidden;
}
.navbarmega a:hover, .dropdownnnt:hover{
    /*background-color: red;*/
    background-color:#22B573;
}
.dropdownnnt-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 60px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdownnnt-content a {
    float: none;
    color: black;
    padding: 12px 38px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdownnnt-content a:hover {
    background-color: #ddd;
}

.dropdownnnt:hover .dropdownnnt-content {
    display: block;
}
</style>
<style>
/* ---------------menu dropdown------------- */
.dropdownnnte {
    float: left;
    overflow: hidden;
}
.navbarmega a:hover, .dropdownnnte:hover{
    /*background-color: red;*/
    background-color:#22B573;
}
.dropdownnnte-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 40px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdownnnte-content a {
    float: none;
    color: black;
    padding: 12px 10px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdownnnte-content a:hover {
    background-color: #ddd;
}

.dropdownnnte:hover .dropdownnnte-content {
    display: block;
}
</style>

身体

添加多个菜单以使其可视化，以便他们观察它在手机中的外观

       1

   <div class="dropdownn">
      <a><i class="fa fa-calendar"></i>2</a><br/><br/><br/>
      <div class="dropdownn-content">
         <a target="_blank" href="">1</a><a target="_blank" href="">2</a> </div>
   </div>
   <div class="dropdownnn">
      <a><i class="fa fa-wpforms"></i>Sub 3</a><br/><br/><br/>
      <div class="dropdownnn-content">
         <a target="_blank" href="">1</a><a target="_blank" href="">2</a> </div>
   </div>
   <div class="dropdownnnt">
      <a><i class="fa fa-refresh"></i>Sub 4</a><br/><br/><br/>
      <div class="dropdownnnt-content">
         <a target="_blank" href="">1</a><a target="_blank" href="">2</a> </div>
   </div>
   <div class="dropdownnnte">
      <a><i class="fa fa-fw fa-bar-chart-o"></i>Sub 5</a><br/><br/><br/>
      <div class="dropdownnnte-content">
         <a target="_blank" href="">1</a><a target="_blank" href="">2</a> </div>
   </div>
   <a target="_blank" href=""><i class="fa fa-building-o"></i>6</a>
   <a target="_blank" href=""><i class="fa fa-fw fa-gears"></i>7</a>
   <a target="_blank" href=""><i class="fa fa-fw fa-vcard"></i>8</a>
   <a target="_blank" href=""><i class="fa fa-mixcloud"></i>9</a>
   <a target="_blank" href=""><i class="fa fa-gavel"></i>10</a>
   <a target="_blank" href=""><i class="fa fa-gavel"></i>11</a>
   <a target="_blank" href=""><i class="fa fa-gavel"></i>12</a>

希望您能帮助我解决这个问题