Reply To: Pure CSS Menu with submenus with flex

[Historical Forums User]

its alreday there sir,

<nav>
    <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Tutorials</a>
                <ul>
                    <li><a href="#">Photoshop</a></li>
                    <li><a href="#">Illiustrator</a></li>
                    <li><a href="#">Web Design</a>
                        <ul>
                            <li><a href="#">HTML</a></li>
                            <li><a href="#">CSS</a></li>
                        </ul>
                    </li>
                </ul>

            </li>
            <li><a href="#">Articles</a>
                <ul>
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">User Experience</a></li>
                </ul>

            </li>
            <li><a href="#">Inspiration</a></li>

        </ul>
</nav>

css file

• {
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  margin: 0;
  padding: 0;

  }
  .body {
  font-size: 62.5%;
  }
  nav {
  background-color: green;
  width: 100%;
  }
  a {
  text-decoration:none;
  color:white;
  font-family:”Segoe UI”;
  }
  nav ul {
  list-style: none;
  }

  .menu {
  display:flex;
  flex-flow:row wrap;
  justify-content:space-between;
  max-width: 1024px;
  min-height: 40px;
  margin: 0 auto;
  align-items:center;
  }

  nav ul ul {
  display: none;
  }
  nav ul li:hover > ul {
  display: flex;
  flex-flow: column wrap;
  }