如何在菜单下拉菜单中实现此输出

Question

我真的没有如何解释我的问题以便从读者那里得到我的预期结果但是在解决方案中我需要想法或解决方法如何编码我的CSS如下图所示输出html菜单下拉列表

这是我尝试过的代码：

a {
  color: #4C9CF1;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: #555;
}

nav {
  float: left;
  padding: 20px;
}

#menu-icon {
  display: hidden;
  width: 40px;
  height: 40px;
  background: #4C8FEC url(menu-icon.png) right;
  border: 2px solid #000;
  border-radius: 4px 0 4px 4px;
}

a:hover#menu-icon {
  background-color: #444;
  border-radius: 4px 4px 0 0;
}

ul {
  list-style: none;
}

li {
  display: inline-block;
  float: right;
}

section {
  margin: 80px auto 40px;
  max-width: 980px;
  position: relative;
  padding: 20px
}


/*MEDIA QUERY*/

@media only screen and (max-width: 640px) {
  header {
    position: absolute;
  }
  #menu-icon {
    display: inline-block;
  }
  nav ul,
  nav:active ul {
    display: none;
    position: absolute;
    padding: 2px;
    border: 2px solid #000;
    center: 20px;
    width: 100%;
    border-radius: 4px 0 4px 4px;
  }
  nav li {
    text-align: center;
    width: 100%;
    padding: 2px 0;
    margin: 0;
  }
  nav:hover ul {
    display: block;
  }
  

<nav>
    <a href="#" id="menu-icon"></a>
    <ul>
      <li><a href="#" class="current">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

但它输出我的菜单下拉列表

我应该多大感谢你在我的解决方案中的时间和影响

Answer 1

要解决您的问题，只需使用flexbox即可！

.nav {
   display: flex;
   padding: 20px
}

nav li {
   flex: 1
}

将导航设置为display: flex以在一行中显示两个元素。从li移除100％的宽度并设置flex:1，使其扩展到给定的空间。如果你想设置一个最大宽度 - 只需用你的joice值设置它就可以将它绑定到最大扩展范围。

删除以下

li {
  display: inline-block;
  float: right;
}

有关flexbox的更多信息：https://www.w3schools.com/css/css3_flexbox.asp

Answer 2

第一个：

https://jsfiddle.net/Liamm12/9wkavvd0/1/

第二个：

https://jsfiddle.net/Liamm12/9wkavvd0/2/

你好！

也许这就是你要做的事情

第一个

g2

a {
  color: #4C9CF1;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: #555;
}

nav {
  float: left;
  padding: 20px;
}

#menu-icon {
  display: hidden;
  width: 40px;
  height: 40px;
  background: #4C8FEC url(menu-icon.png) right;
  border: 2px solid #000;
  border-radius: 4px 0 4px 4px;
}

a:hover#menu-icon {
  background-color: #444;
  border-radius: 4px 4px 0 0;
}

ul {
  list-style: none;
}

li {
  display: inline-block;
  float: right;
}

section {
  margin: 80px auto 40px;
  max-width: 980px;
  position: relative;
  padding: 20px
}


/*MEDIA QUERY*/

@media only screen and (max-width: 640px) {
  header {
    position: absolute;
  }
  #menu-icon {
    display: inline-block;
  }
  nav{
    display:flex;
  }
  nav ul,
  nav:active ul {
    display: none;
    padding: 6px 0px 0px 1px;
    margin-left: 15px;
    margin-top: 0px;
    border: 2px solid #000;
    border-radius: 4px 0 4px 4px;
  }
  nav li {
    text-align: center;
    width: 100%;
    padding: 2px 0;
    margin: 0;
  }
  nav:hover ul {
    display: block;
  }
  

第二个：

<nav>
    <a href="#" id="menu-icon"></a>
    <ul>
      <li><a href="#" class="current">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

a {
  color: #4C9CF1;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: #555;
}

nav {
  float: left;
  padding: 20px;
}

#menu-icon {
  display: hidden;
  width: 40px;
  height: 40px;
  background: #4C8FEC url(menu-icon.png) right;
  border: 2px solid #000;
  border-radius: 4px 0 4px 4px;
}

a:hover#menu-icon {
  background-color: #444;
  border-radius: 4px 4px 0 0;
}

ul {
  list-style: none;
}

li {
  display: inline-block;
  float: right;
}

section {
  margin: 80px auto 40px;
  max-width: 980px;
  position: relative;
  padding: 20px
}


/*MEDIA QUERY*/

@media only screen and (max-width: 640px) {
  header {
    position: absolute;
  }
  #menu-icon {
    display: inline-block;
  }
  nav{
    display:flex;
  }
  nav ul,
  nav:active ul {
    display: none;
    padding: 6px 0px 0px 1px;
    margin-left: 15px;
    margin-top: 0px;
    border: 2px solid #000;
    border-radius: 4px 0 4px 4px;
  }
  nav li {
padding: 4px 8px 10px 5px;
    margin: 0;
  }
  nav:hover ul {
    display: block;
  }