flexbox 导航栏切换

Question

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

我需要查询中的代码。

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

  }

这甚至可能与 flex box 一起使用吗？

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

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

这是我的代码。

 * { 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;
    }
}