Pure CSS Menu with submenus with flex

[Historical Forums User]

having problem making pure CSS menu bar as in http://line25.com/wp-content/uploads/2012/css-menu/demo/index.html

using only display property flex (not to use any block property or floats)

please provide me with css code, background-color or gradient color does not matter.

Thanks in advance
Abhi

[Paulie_D]

What have you tried so far?

We don’t mind helping out with code you are having trouble with but you cant expect us to do it all for you.

Perhaps you could show us what you are having issues with in Codepen?

[Historical Forums User]

@ Paulie_D

following is the coding for menu . sub-menu takes full width as well as it increase the nav height. Somehow when clicking this link open different page. Just copy the following link & paste to new tab to see coding in codepen.io website.

http://codepen.io/abhi7/pen/dwfaB

[Paulie_D]

You want ME to make a Codepen for you?

[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;
  }

[Paulie_D]

The link you gave is to another CSS-Tricks thread….not a Codepen.

[Historical Forums User]

I know, you have to copy the address for codepen for open to new webpage, I have already mentioned above also, sorry for your inconvenience.

[Paulie_D]

You’re not using any positioning…why is that?

[atwulf]

The main problem you have is that you weren’t using positioning on your elements, which is what caused the nav bar to change height on the hover states.

I forked your pen and applied the changes to your CSS; you’ll see my changes annotated with comments: http://codepen.io/atwulf/pen/KxyIj

I added position: relative; to the top-level list items (.menu li) and sub-menus (.menu ul). Then, I added position: absolute; to the two sub-menus (.menu li:hover ul and .menu li ul li:hover ul).

You can see all the changes in my pen, linked above.

[Author]

Posts