Question

如何添加媒体查询，以便在屏幕缩小到768px时，我的伸缩框导航栏变为切换菜单？

我需要查询中的代码。

@media only screen and (max-width: 768px) {

  }

弹性盒是否有可能？

请不要发布指向其他网站的链接。

请不要建议我使用引导程序。我不知道如何使用它。

这是我的代码。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#main-nav a {
    color: #ffffff;
    background: #d3333b;
    display: block;
    height: 48px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.4s;
}

#main-nav a:hover {
    background: #777;
}

#main-nav ul {
    list-style: none;
    display: flex;
}

#main-nav li {
    width: 100%;
    text-align: center;
    position: relative;
}

#main-nav li:hover .submenu>li {
    display: block;
    top: 0px;
}

.submenu li {
    display: none;
    position: absolute;
    top: 0px;
}

.submenu {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
}

.wrapper {
    margin-right: auto;
    /* 1 */
    margin-left: auto;
    /* 1 */

    max-width: 960px;
    /* 2 */

    padding-right: 10px;
    /* 3 */
    padding-left: 10px;
    /* 3 */
}

@media only screen and (max-width: 768px) {
    
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Flexbox Dropdown Menu</title>
</head>
<body>
  <nav id="main-nav">
    <ul>
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">Menu 1</a>
        <ul class="submenu">
          <li>
            <a href="#">Sub Menu 1.1</a>
          </li>
          <li>
            <a href="#">Sub Menu 1.2</a>
          </li>
          <li>
            <a href="#">Sub Menu 1.3</a>
          </li>
          <li>
            <a href="#">Sub Menu 1.4</a>
          </li>
          <li>
            <a href="#">Sub Menu 1.5</a>
          </li>
          <li>
            <a href="#">Sub Menu 1.6</a>
          </li>
          <li>
            <a href="#">Sub Menu 1.7</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="">Menu 2</a>
        <ul class="submenu">
          <li>
            <a href="#">Sub Menu 2.1</a>
          </li>
          <li>
            <a href="#">Sub Menu 2.2</a>
          </li>
          <li>
            <a href="#">Sub Menu 2.3</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Menu 3</a>
      </li>
      <li>
        <a href="#">Menu 4</a>
      </li>
    </ul>
  </nav>
</body>

Answer 1

请尝试以下CSS：

@media (max-width: 768px){
    #main-nav ul{
        flex-direction: column;
    }
    .submenu{
        position: relative;
    }
}

flexbox导航栏切换

1 个答案: